利用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 += "

"+staname+"

所属公交公司:"+ company+"

首发站:"+ front_name+"

终点站:"+ terminal_name+"

早班车时间:"+ start_time+"

末班车时间:"+ end_time+"

线路总程:"+ length+"km

全程共:"+ total+"站

"; 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 += "第"+sta+"站:"+_name+"
";//第几站:途径站点 } 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调用聚合数据API_第1张图片
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比较生疏,望江湖人士不吝赐教

你可能感兴趣的:(利用jsonp调用聚合数据API)