DEV

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>