跨域请求：查询天气

最新推荐文章于 2022-03-20 20:21:09 发布

原创最新推荐文章于 2022-03-20 20:21:09 发布 · 588 阅读

1 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

9 篇文章

订阅专栏

例：http://tianqi.2345.com/t/shikuang/57083.js?1507707799100
response：var weatherinfovar = {"weatherinfo":{"city":"\u90d1\u5dde","cityid":"101180101","temp":"13","SD":"82%","WD":"\u4e1c\u5317\u98ce","WS":"1\u7ea7","QY":"1026","JS":"\u964d\u6c34\u6982\u7387: 59%","pm25":"22","idx":"39","lv_hint":"\u4f18","aqiLevel":1}};

解析后：weatherinfo:
JS: "降水概率: 59%"
QY: "1026"（气压）
SD: "82%" （湿度）
WD: "东北风"
WS: "1级"
aqiLevel: 1
city: "郑州"
cityid: "101180101"
idx: "39"
lv_hint: "优"
pm25: "22"
temp: "13"（当前温度）
__proto__: Object

分析url：‘57083’是城市的编号，?1507707799100：时间戳

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跨域请求2</title>
    <script type="text/javascript" src="/static/js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="http://tianqi.2345.com/t/map_js/china.js"></script>
    <script type="text/javascript" src="http://tianqi.2345.com/t/shikuang/57083.js" id="change"></script>
    <script type="text/javascript">
        //weatherinfovar:郑州天气  chinaWeaInfo:全国天气
        console.log(weatherinfovar);
        //获取各省会城市的cityid 和 name，并转换为json对象
        var cityidinfo ="{";
        $.each(chinaWeaInfo,function(index,item){
            cityidinfo += '"' + item.name +'"'+ ':' +'"'+ index +'"' +',';
        });
        cityidinfo = cityidinfo.slice(0,-1) + "}";
        cityidinfo = JSON.parse(cityidinfo);

        weather = weatherinfovar.weatherinfo;
        $(function () {
            weatherinfo(weather);
            $('#search').click(function () {
                //console.log($('#change').attr('src'));
                sendrequest(cityidinfo[$('#cityid').val()])
            })
        });
        //显示天气
        function weatherinfo(weather) {
            var msg = '';
            msg += '城市: ' + weather.city +'<br>';
            msg += '当前温度： ' + weather.temp + '℃<br>';
            msg += '湿度： ' + weather.SD + '<br>';
            msg += '风力： ' + weather.WD + weather.WS + '<br>';
            msg += '气压： ' + weather.QY + 'hPa<br>';
            msg += '空气质量： ' + weather.lv_hint;
            $('#weatherinfo').html(msg)
        }

        //发送ajax请求
        function sendrequest(cityid) {
            var src;
            //设置请求url

src = "http://tianqi.2345.com/t/shikuang/" +cityid+ ".js?t=" + new Date().getTime(); $('#change').attr({'src':src}); //$.getJSON(src+'format =json&jsoncallback=?'); $.ajax({ url:src, dataType:'jsonp', complete:function (xhr,status) { console.log(status); console.log(weatherinfovar); weatherinfo(weatherinfovar.weatherinfo); } }); } </script></head><body><input type="text" name="cityid" id="cityid"><input type="button" value="查询" id="search"><br><div id="weatherinfo"></div></body></html>