通用jsonp跨域技术获取天气数据

1. 前言

在进行网站开发的过程中经常会用到第三方的数据，但是由于同源策略的限制导致ajax不能发送请求，因此也无法获得数据。解决ajax的跨域问题可以使用jsonp技术

2.代码

<!DOCTYPE html>

<html>

<head>

    <title>weatherSample</title>

    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

    <script type="text/javascript">

    $(document).ready(function(){

        //init, default: XiaMen

        getWeatherInfo();

        $("#cityName").text("城市: 厦门");

        var tableHeaderData = $('table').parent().html();

        function getWeatherInfo(){

            $.ajax({

                type : "get",

                async: false,

                url : "http://api.map.baidu.com/telematics/v3/weather?output=json&ak=6tYzTvGZSOpYB5Oc2YGGOKt8",

                data:{

                    location:$("#city").val()||"厦门"

                },

                dataType: "jsonp",

                jsonp:"callback", //请求php的参数名

                jsonpCallback: "jsonhandle",//要执行的回调函数

                success : function(data) {

                   if(data.status == 'success'){

                       $('#tip').html("");

                       var list =  data.results;

                       var weatherDataArr = list[0].weather_data;

                       var items = "";

                       //init table of weatherInfo, just stay header data

                       $('table').html(tableHeaderData);

                       for(var i=0 ; i< weatherDataArr.length ;i++){

                         var date = weatherDataArr[i].date;

                         var dayPictureUrl = weatherDataArr[i].dayPictureUrl;

                         var nightPictureUrl = weatherDataArr[i].nightPictureUrl;

                         var temperature = weatherDataArr[i].temperature;

                         var weather = weatherDataArr[i].weather;

                         var wind = weatherDataArr[i].wind;

                         var item = "<tr><td>"+date+"</td>"

                                  + "<td><img src='"+dayPictureUrl+"'/></td>"

                                  + "<td><img src='"+nightPictureUrl+"'/></td>"

                                  + "<td>"+temperature+"</td>"

                                  + "<td>"+weather+"</td>"

                                  + "<td>"+wind+"</td>"

                                  + "</tr>";

                         items+=item;

                       }

                        $('table tr').after(items);

                   }

               },

               error:function(data){

                //获取失败,打印出原因

                  $('#tip').html(`error reason=>{"status":220,"message":"APP Referer校验失败"}`)

                }

            });

        }

        $("button").click(function(){

            getWeatherInfo();

        })

        $("input").change(function(){

            $("#cityName").text("城市: " + $('#city').val());

        }) 

    });

</script>

</head>

<body>

<div  style="margin-bottom:10px">

    <input type="text" id="city" name="city"/>

    <button style="margin-left:10px">天气查询</button>

</div>

<div id="cityName" style="margin-bottom:10px">城市: </div>

<div>

    <table border="1px">

        <tr>

            <th>日期</th>

            <th>白天</th>

            <th>晚上</th>

            <th>温度</th>

            <th>天气</th>

            <th>风力</th>

        </tr>

    </table>

</div>

<div id="tip" style="margin-bottom:10px"></div>

</body>

</html>

注：请求ak已失效

3.功能与效果

3.1 功能

首次加载，默认是厦门的天气预报，输入城市名并点击天气查询按钮则获取该天气的天气预报

3.2 效果图

通用jsonp跨域技术获取天气数据

4.说明

向百度天气服务器发送请求的参数是：output=json&ak=6tYzTvGZSOpYB5Oc2YGGOKt8&callback=jsonhandle&location=%E5%8E%A6%E9%97%A8&_=1507712014958， %E5%8E%A6%E9%97%A8是厦门的utf-8编码加%组成，好奇宝宝点这里

ajax返回来的data如下:

通用jsonp跨域技术获取天气数据

5.参考

1.深入理解jsonp跨域请求原理

2.简单透彻理解JSONP原理及使用（讲得很通俗易懂）

秒客网

通用jsonp跨域技术获取天气数据

相关文章