HTML中跨域请求天气粗略效果

HTML中跨域请求天气粗略效果

html+css部分：

<style>
table{
border:1px red solid;
border-collapse: collapse;
margin:10px 2px;
}
td{
border: 1px black solid;
padding: 10px;
}
</style>

<input type="text" id="city">
<input type="button" value="查询" id="btn">

<table id="showTable">

</table>

script部分：

// 1 获取节点
var cityObj = document.getElementById('city');
var btnObj = document.getElementById('btn');
var head = document.querySelector('head');
var tableObj = document.getElementById('showTable')
// 2 给查询绑定点击事件
btnObj.onclick = function(){
// 获取表单中的city,写到url上
var city = cityObj.value;
let url = "http://api.jisuapi.com/weather/query?callback=managerData&appkey=3fa977031a30ffe1&city="+city;
//3 生成script,设置src属性,追加到head中
var scr = document.createElement('script');
scr.src = url;
head.appendChild(scr);
}

// 4 设置回调函数,接受数据
function managerData(data){
console.log(data.result);
let res = data.result;
var str = `<tr><td>城市</td><td>${res.city}</td></tr><tr><td>日期</td><td>${res.date}</td></tr><tr><td>天气</td><td>${res.weather}</td></tr><tr><td>气温</td><td>${res.temp}</td></tr><tr><td>最高气温</td><td>${res.temphigh}</td></tr><tr><td>最低气温</td><td>${res.templow}</td></tr><tr><td>更新时间</td><td>${res.updatetime}</td></tr>`;
tableObj.innerHTML = str;
}
</script>