在聚合數據中找到免費的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首頁會顯示兩個輸入框和一個搜索按鈕,
第一個搜索框輸入城市,第二個搜索框輸入公交線路,點擊查詢,即可搜索到對應的公交線路。
2017-01-14_162607.png
(嘎嘎,請忽略我這醉人的樣式~~~~~~)
如圖,效果預覽,列出了所取數據的信息。
jsonp解決了跨域訪問的問題。巧妙地利用了script標簽的src屬性。
寫法還是較為簡單的,格式比較簡單。
在使用接口之前,可以測試API接口是否可以使用jsonp方法獲取數據
將得到的接口地址放入地址欄并轉到。
-
地址欄的地址格式為:
2017-01-14_164948.png
即: 接口地址 ? dtype = jsonp & key = 你的Appkey & 必填屬性1 = 屬性值1 & 必填屬性2 = 屬性值2 測試后 頁面的數據格式 會在開頭和末尾加上 大括號----> { 數據 }
之后再加上請求函數名(自定義)比如:&callback = show 數據兩端會出現小括號,這樣的數據就可以作為jsonp形式來請求
-------------------首次寫文章,markdown比較生疏,望江湖人士不吝賜教