原生jsonp解决跨域问题例子_获取第三方天气数据_jsonp获取第三方数据-优快云博客

本文链接：https://blog.youkuaiyun.com/stopcpp/article/details/53334283
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>原生jsonp解决跨域问题例子_获取第三方天气数据</title>
        <style>
            #div1 {
                width: 300px;
                height: 500px;
                position: relative;
                left: 50%;
                background-color: lightGreen;
                margin-left: -150px;
                padding-bottom: 20px;
                overflow-x: hidden;
                overflow-y: scroll;
            }
            #div1 select {
                height: 30px;
                margin-left: 80px;
                margin-top: 10px;
            }
            #div1 input {
                height: 30px;
            }
            #div1 div {
                width: 300px;
                background: lightBlue;
                border-bottom: 1px solid red;
            }
            #div1 div ul li {
                list-style-type: none;
                padding-left: 10px;
            }
        </style>
        <script>
        function MyWeather(data){
            var d = data.weather;
            var info = document.getElementById("info");
            info.innerHTML = '';
            for(var i = 0;i<d.length;i++){
                var date = d[i].date;
                var day = d[i].info.day;
                var night = d[i].info.night;
                var tag ='';
                tag +='<span>日期：'+date+'</span><ul>';
                tag += '<li>白天天气:'+day[1]+'</li>';
                tag += '<li>白天温度:'+day[2]+'</li>';
                tag += '<li>白天风向:'+day[3]+'</li>';
                tag += '<li>白天风速:'+day[4]+'</li>';
                tag += '</ul>';

                tag += '<ul>';
                tag += '<li>夜间天气：'+night[1]+'</li>';
                tag += '<li>夜间温度：'+night[2]+'</li>';
                tag += '<li>夜间风向：'+night[3]+'</li>';
                tag += '<li>夜间风速：'+night[4]+'</li>';
                tag += '</ul>';
                var div = document.createElement("div");
                div.innerHTML = tag;
                info.appendChild(div);
            }
        }
            window.onload = function(){
                var city = document.getElementById("city");
                city.onchange = function(){
                    document.getElementById("info").innerHTML = '';
                }
                var btn = document.getElementById("btn");
                btn.onclick = function(){
                    var cityCode = city.value;
                    var url = 'http://cdn.weather.hao.360.cn/api_weather_info.php?app=hao360&_jsonp=MyWeather&code='+city.value;
                    var script = document.createElement("script");
                    script.src = url;
                    document.body.appendChild(script);
                }
            }
        </script>
    </head>
    <body>
    <div id="div1">
        <select name="" id="city">
            <option value="101120101">济南</option>
            <option value="101010100">北京</option>
            <option value="101020100">上海</option>
            <option value="101280101">广州</option>
            <option value="101280601">深圳</option>
        </select>
        <input type="button" value="查看天气" id="btn">
        <div id="info"></div>
    </div>
    </body>
</html>