利用jsonp調用聚合數據API

聚合數據中找到免費的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比較生疏,望江湖人士不吝賜教

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 國家電網公司企業標準(Q/GDW)- 面向對象的用電信息數據交換協議 - 報批稿:20170802 前言: 排版 ...
    庭說閱讀 11,145評論 6 13
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,242評論 25 708
  • 創新驅動包容發展--宜商再出發 --2016成都宜商中秋聯誼會暢談建言 尊敬的呂會長、各位老鄉企業家朋友...
    觀海聽濤ZHU閱讀 457評論 4 0
  • 沒看電影之前,據說是一部國產文藝片,并且廣受好評??吹诫娪伴_篇的時候明白,原來所有的打分里面更多的是對導演吳天明的...
    子非_似是而非閱讀 229評論 0 0
  • 新韻格律詩一組 (一)、七絕二首.晨起抒懷 其一 童心未泯春常在, 遠志猶存再抗爭。 守到風來云散盡, 一輪紅日照...
    水波楊山閱讀 495評論 0 8