在聚合數(shù)據(jù)中找到免費(fèi)的API接口薄啥，申請(qǐng)通過(guò)后會(huì)得到相應(yīng)的APIkey镊屎。
對(duì)應(yīng)的js代碼塊如下：
function shows ( data ) {
// console.log(data); //本行供測(cè)試使用
var reason = data.reason; //返回結(jié)果
if(reason != "success"){
inp.value = "";
inp1.value = "";
show.innerHTML = "";
alert("Sorry!數(shù)據(jù)庫(kù)暫未收錄\n我們將不斷更新链瓦！");
// 如果返回的不是success信息发乔，控制臺(tái)就會(huì)報(bào)錯(cuò)熟妓，所以采用這種方法，用戶(hù)輸入的結(jié)果查詢(xún)不到時(shí)栏尚，彈出信息起愈，并將輸入的內(nèi)容清空。
}else{
var html = "";
var staname = data.result[0].name; //線路名稱(chēng)
var company = data.result[0].company; //公交線路所屬公司
var front_name = data.result[0].front_name; //首發(fā)站名稱(chēng)
var terminal_name = data.result[0].terminal_name; //終點(diǎn)站名稱(chēng)
var start_time = data.result[0].start_time.slice(0,2)+":"+
data.result[0].start_time.slice(2); //早班車(chē)時(shí)間译仗，此處經(jīng)過(guò)了字符串的處理抬虽，由于源數(shù)格式為沒(méi)有冒號(hào)隔開(kāi)的時(shí)間字符串
var end_time = data.result[0].end_time.slice(0,2)+":"+
data.result[0].end_time.slice(2); //末班車(chē)時(shí)間，處理方法同上
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>首發(fā)站:</i>"+
front_name+"</p><p><i>終點(diǎn)站:</i>"+
terminal_name+"</p><p><i>早班車(chē)時(shí)間:</i>"+
start_time+"</p><p><i>末班車(chē)時(shí)間:</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>";//第幾站：途徑站點(diǎn)
}
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首頁(yè)會(huì)顯示兩個(gè)輸入框和一個(gè)搜索按鈕纵菌，
第一個(gè)搜索框輸入城市阐污，第二個(gè)搜索框輸入公交線路，點(diǎn)擊查詢(xún)咱圆，即可搜索到對(duì)應(yīng)的公交線路笛辟。
2017-01-14_162607.png
（嘎嘎，請(qǐng)忽略我這醉人的樣式~~~~~~）
如圖序苏，效果預(yù)覽隘膘，列出了所取數(shù)據(jù)的信息。
jsonp解決了跨域訪問(wèn)的問(wèn)題杠览。巧妙地利用了script標(biāo)簽的src屬性弯菊。
寫(xiě)法還是較為簡(jiǎn)單的，格式比較簡(jiǎn)單踱阿。
在使用接口之前管钳，可以測(cè)試API接口是否可以使用jsonp方法獲取數(shù)據(jù)
將得到的接口地址放入地址欄并轉(zhuǎn)到。
-
地址欄的地址格式為：
2017-01-14_164948.png
即： 接口地址 软舌？ dtype = jsonp & key = 你的Appkey & 必填屬性1 = 屬性值1 & 必填屬性2 = 屬性值2 測(cè)試后 頁(yè)面的數(shù)據(jù)格式 會(huì)在開(kāi)頭和末尾加上 大括號(hào)----> { 數(shù)據(jù) }
之后再加上請(qǐng)求函數(shù)名（自定義）比如：&callback = show 數(shù)據(jù)兩端會(huì)出現(xiàn)小括號(hào)才漆，這樣的數(shù)據(jù)就可以作為jsonp形式來(lái)請(qǐng)求
-------------------首次寫(xiě)文章，markdown比較生疏佛点，望江湖人士不吝賜教
