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