edo1z blog

プログラミングなどに関するブログです

JQueryで駅データ取得

HeartRails ExpressのAPIを使って、JQueryで駅データ取得するスクリプト。しかし、GAEで駅データベースをしっかり作ろうとした場合、APIに逐一アクセスするのはかなり遅くなりそうでいやだし、駅名とか県名とか路線名そのものでアクセスや検索をするのは、かなり非効率そうだから、HeartRails Expressよりも駅データjpのがよいと思った。

<h3>駅データの取得</h3>

<script type="text/javascript">
$(function(){
    $(window).load(function () {get_ken();});
    $('#ken').change(function(){get_line();});
    $('#line').change(function(){get_station();});
});

function get_ken() {
    $.ajax({
        dataType: "jsonp",
        data: {"method":'getPrefectures'},
        url: "http://express.heartrails.com/api/json",
        success: function (data) {
            $.each(data.response.prefecture, function(idx,ken_name){
                $("<option/>")
                   .attr("value", ken_name)
                   .append(ken_name)
                   .appendTo("#ken");
            });
        }
    });
}
function get_line(){
    var ken = $("#ken option:selected").text();
    $.ajax({
        dataType: 'jsonp',
        data:{'prefecture':ken},
        url:'http://express.heartrails.com/api/json?method=getLines',
        success: function(data){
            $('#line option').remove();
            $.each(data.response.line, function(idx,line_name){
                $("<option/>")
                    .attr("value", line_name)
                    .append(line_name)
                    .appendTo("#line");
            });
        }
    });
}
function get_station(){
    var line = $("#line option:selected").text();
    $.ajax({
        dataType: 'jsonp',
        data:{'line':line},
        url:'http://express.heartrails.com/api/json?method=getStations',
        success: function(data){
            $('#station option').remove();
            $.each(data.response.station, function(idx,station_info){
                $("<option/>")
                    .attr("value", station_info.name)
                    .append(station_info.name)
                    .appendTo("#station");
            });
        }
    });
}
</script>

<select id="ken"></select>
<select id="line"></select>
<select id="station"></select>