创建script标签，原生解决跨区

最新推荐文章于 2024-02-15 00:15:00 发布

紫晓宁

最新推荐文章于 2024-02-15 00:15:00 发布

阅读量340

点赞数

分类专栏：前端web

本文链接：https://blog.csdn.net/zixiaoning/article/details/52599543

版权

前端web 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

创建script标签解决跨域问题：（代码不完整）

<body>
<script type="text/javascript">
    //可以将获取天气的json数据，将数据拼接到页面中
    function weather(data) {//为接口的名字，可以自定义
        var d = data.weather;
        var info = document.getElementById('`');
//       数据解析
        info.innerHTML = '';
        for (var i = 0; i < d.length; i++) {
            var date = d[i].date;
            var day = d[i].indo.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>';
            var div = document.createElement('div');
            div.innerHTML = tag;
            info.appendChild(div);
        }
    }
//    切换不同城市时，将info div区域的内容清空，通过点击查询按钮， 将城市编号传递给360天气的接口，将获取的rul追加到script标签中
    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;
//            url: '360天气接口' + city.value;
            url: 'http://tq.360.cn/api/weatherquery/querys?app=tq360&code=$code&_jsonp=weather&code= ' + city.value;
            var script = document.createElement('script');
            script.src = url;
            document.body.appendChild(script);
        }
    }
    }
</script>
<!-- 点击查询会动态的生成一个script的标签-->
<div div="div1">
    <select id="city">
        <option value="0001">北京</option>
        <option value="0002">上海</option>
        <option value="0003">广州</option>
        <option value="0004">深圳</option>
    </select>
    <input type="button" value="查看天气" id="btn">
    <div id="info"></div>
</div>
</div>
</body>