利用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比较生疏，望江湖人士不吝赐教