在聚合数据中找到免费的API接口,申请通过后会得到相应的APIkey。
对应的js代码块如下:
function shows ( data ) {
// console.log(data); //本行供测试使用
var reason = data.reason; //返回结果
if(reason != "success"){
inp.value = "";
inp1.value = "";
show.innerHTML = "";
alert("Sorry!数据库暂未收录\n我们将不断更新!");
// 如果返回的不是success信息,控制台就会报错,所以采用这种方法,用户输入的结果查询不到时,弹出信息,并将输入的内容清空。
}else{
var html = "";
var staname = data.result[0].name; //线路名称
var company = data.result[0].company; //公交线路所属公司
var front_name = data.result[0].front_name; //首发站名称
var terminal_name = data.result[0].terminal_name; //终点站名称
var start_time = data.result[0].start_time.slice(0,2)+":"+
data.result[0].start_time.slice(2); //早班车时间,此处经过了字符串的处理,由于源数格式为没有冒号隔开的时间字符串
var end_time = data.result[0].end_time.slice(0,2)+":"+
data.result[0].end_time.slice(2); //末班车时间,处理方法同上
var length = parseFloat(data.result[0].length).toFixed(3); //线路总程
var total = data.result[0].stationdes.length;
html += "<p>"+staname+"</p><p><i class='first'>所属公交公司:</i>"+
company+"</p><p><i>首发站:</i>"+
front_name+"</p><p><i>终点站:</i>"+
terminal_name+"</p><p><i>早班车时间:</i>"+
start_time+"</p><p><i>末班车时间:</i>"+
end_time+"</p><p><i>线路总程:</i>"+
length+"km</p><p><i>全程共:</i>"+
total+"站</p>";
for(var i = 0; i < total; i++){
//console.log(data.result[0].stationdes[i].name);
var sta = data.result[0].stationdes[i].stationNum;
var _name = data.result[0].stationdes[i].name;
html += "<span>第"+sta+"站:</span>"+_name+"<br>";//第几站:途径站点
}
show.innerHTML = html;
}
}
btn.onclick = function(){
var script = document.createElement("script");
script.src = "http://op.juhe.cn/189/bus/busline?"+
"key=40bfefaea964d5fc943e7a67c398d66c&city="+
inp.value+"&bus="+inp1.value+"&dtype=jsonp&callback=shows";
document.body.appendChild(script);
}
index首页会显示两个输入框和一个搜索按钮,
第一个搜索框输入城市,第二个搜索框输入公交线路,点击查询,即可搜索到对应的公交线路。
(嘎嘎,请忽略我这醉人的样式~~~~~~)
如图,效果预览,列出了所取数据的信息。
jsonp解决了跨域访问的问题。巧妙地利用了script标签的src属性。
写法还是较为简单的,格式比较简单。
在使用接口之前,可以测试API接口是否可以使用jsonp方法获取数据
将得到的接口地址放入地址栏并转到。
-
地址栏的地址格式为:
即: 接口地址 ? dtype = jsonp & key = 你的Appkey & 必填属性1 = 属性值1 & 必填属性2 = 属性值2 测试后 页面的数据格式 会在开头和末尾加上 大括号----> { 数据 }
之后再加上请求函数名(自定义)比如:&callback = show 数据两端会出现小括号,这样的数据就可以作为jsonp形式来请求
-------------------首次写文章,markdown比较生疏,望江湖人士不吝赐教