需要引用Jquery
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
HTML部分
<p>
<span class="add"></span>
<span class="weather"></span>
<span class="temp"></span>
<img src="" alt="" class="img" width="40">
</p>
JS部分
$(function(){
//获取网络请求信息(根据不同的url返回不同的结果)
function getApi(url){
return new Promise((resolve,reject)=>{
$.ajax({
url:url,
dataType:'jsonp',
success:function(res){
resolve(res);//如果请求成功可以兑现
},
error:function(err){
reject(err);//如果失败 拒绝失败 给出拒绝理由
}
})
})
}
//获取地址
var urlA = 'https://apis.map.qq.com/ws/location/v1/ip?key=CAABZ-AVSAQ-RDR5L-GTBDJ-HLA4O-A5FDB&output=jsonp&_=1593478015329';
var urlB = 'https://wis.qq.com/weather/common?weather_type=observe|forecast_24h|air&source=pc';
getApi(urlA)
.then(add=>{ //获取地址
console.log(add);
var info = add.result.ad_info;//具体的地址信息
$('.add').html(info.city);
return getApi(urlB+`&province=${info.province}&city=${info.city}`)
})
.then(data=>{//获取天气
console.log(data)
$('.weather').html(data.data.observe.weather);
$('.temp').html(data.data.observe.degree);
$(".img").attr("src",`https://mat1.gtimg.com/pingjs/ext2020/qqindex2018/dist/img/weather/${data.data.observe.weather_code}.svg`);
})
.catch(err=>{ //失败
console.error(err)
})
})