通过jsonp跨域问题制作简单的天气

html及css我在此不做介绍,主要来讲讲通过ajax解决跨域问题,获取数据

html块

<select name="" id="city">
            <option value="101210101">杭州</option>
            <option value="101210401">宁波</option>
            <option value="101210301">嘉兴</option>
            <option value="101210701">温州</option>
        </select>

JS代码块

    btn.onclick = function () {
        date.innerHTML = ' ';
        let cityCode = document.getElementById('city').value;
        console.log(cityCode);
        let url = 'http://cdn.weather.hao.360.cn/api_weather_info.php?app=hao360&_jsonp=smartloaddata&code=' + cityCode;
//这里的链接,是我从360API找的 ,类似一样的网站在网络上很多公开的,供大家使用
//这里cityCode 其是指我html上面section的value指
        let script = document.createElement('script');
        script.src = url;
        document.body.appendChild(script);

    }

我们能从上面的代码获取到相应数据

for (let item of weather) {
            let date = item.date;
            let day = item.info.day;
            tag += `<li>日期:${date}</li>`;
            tag += `<li>${day[1]}</li>`;
            tag += `<li>${day[2]}</li>`;
            tag += `<li>${day[3]}</li>`;
            tag += `<li>${day[4]}</li>`;
        }
        date.innerHTML = tag;

再运用es6的写法把获取到的数据进行整理在网页中展现出来
es6 : ${element}} let