みなさん、こんにちは梅巴哥er。この記事では、jsonpを紹介して、ドメイン間でTencentの天気情報を取得し、ネイティブJSを使用して天気をページに追加します。时间匆忙，我先把代码放上来，抽空再排版和做注释.
カプセル化されたjsonp（）クロスドメイン関数
function jsonp(options) {
// 因为src是获取资源 jsonp的请求都是get请求
// 所以 我们需要把参数拼接一下
var params = ''
for(var k in options.data) {
params += '&' + k + '=' + options.data[k]
}
// 为了区分不同的请求，设置一个随机函数名
// 如myJsonp031459
var fnName = 'myJsonp' + Math.random().toString().replace('.', '')
// 生成script标签
var script = document.createElement('script')
// 调用函数接收后台的数据
// window把success的函数变成全局函数
window[fnName] = options.success
// 设置src属性
script.src = options.url + '?callback=' + fnName + params
// 把script标签添加到body页面里
document.body.append(script)
// 标签加载完成后
script.onload = function() {
// 移除script标签
document.body.removeChild(script)
}
}
ドメイン全体の天気情報を取得し、ネイティブJSを使用してページに天気を追加します
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>案例：获取腾讯天气</title>
<!-- 为了样式好看一点，引入bootstrapt进行快速搭建 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
</head>
<body>
<!--
先打开腾讯天气网站，从network拿到数据进行分析，
请求地址：https://wis.qq.com/weather/common
请求方式：get
参数：
source, weather_type, province, city
返回值：
{
"data": {
"forecast_1h": {
"0": {
"degree": "11",
"update_time": "20210317000000",
"weather": "小雨",
"weather_code": "07",
"weather_short": "小雨",
"wind_direction": "东北风",
"wind_power": "5"
},
}
"message": "OK",
"status": 200
}
}
-->
<div class="container">
<table class="table table-striped table-hover" align="center" id="table-box">
<tr>
<th>时间</th>
<th>温度</th>
<th>天气</th>
<th>风向</th>
<th>风力</th>
</tr>
</table>
</div>
<script src="./js/jsonp.js"></script>
<script>
// 调用我们封装好的jsonp()函数
jsonp({
url: 'https://wis.qq.com/weather/common',
data: {
source: 'pc',
weather_type: 'forecast_1h',
province: '黑龙江省',
city: '哈尔滨市',
},
success: function (data) {
// 获取天气数据成功后，对数据进行操作
// console.log(data.data.forecast_1h[0].update_time)
console.log(data)
var tableBox = document.getElementById('table-box')
// 往table里添加48个tr
for(var i=0; i<48; i++) {
// 这里一定要把这些新添加的tr用tri区分开来
// 不然appendChild以为你添加的是同一个子节点
// 就不会重复添加那么多tr的
var tri = 'tr' + i
var tri = document.createElement('tr')
// 要想在后续获取到添加的节点
// 一定要先给节点添加属性
tri.setAttribute('id', 'tr'+i)
tableBox.appendChild(tri)
var newTri = 'newTr' + i
var newTri = document.getElementById('tr'+i)
// 再往每个tr里添加5个td
for(var y=0; y<5; y++) {
var tdy = 'td' + y
var tdy = document.createElement('td')
tdy.setAttribute('class', 'td' + i + y)
newTri.appendChild(tdy)
}
// 把时间填充到每个tr的第一个td里
newTri.children[0].innerHTML = data.data.forecast_1h[i].update_time
// 把温度填充到每个tr的第二个td里
newTri.children[1].innerHTML = data.data.forecast_1h[i].degree
// 把天气填充到每个tr的第三个td里
newTri.children[2].innerHTML = data.data.forecast_1h[i].weather
// 把风向填充到每个tr的第四个td里
newTri.children[3].innerHTML = data.data.forecast_1h[i].wind_direction
// 把风力填充到每个tr的第5个td里
newTri.children[4].innerHTML = data.data.forecast_1h[i].wind_power
}
}
})
</script>
</body>
</html>
上記。（つづく）