ajax跨域练习-第三方api全国天气查询
最近学习了ajax跨域,看到教程视频通过调用第三方的api来进行查询数据,于是我也自己尝试下调用当做一个小练习。过程还是不难的,第三方api的教程也很清晰明了,很容易就能调用了。
demo截图:
不要吐槽我的天气图标难看...
代码分析:
$.ajax({ url:'http://api.jisuapi.com/weather/city', data:{appkey:'5c5eac5030bbbf13'}, dataType:'jsonp', success:function(data){ let arr = data.result let reg = new RegExp(""+city+"") let city1 = arr.find((item)=>{ return reg.test(item.city) }) if(!city1){ alert('请输入正确的城市名') return } $.ajax({ url:"http://api.jisuapi.com/weather/query", data:{appkey:'5c5eac5030bbbf13',cityid:city1.cityid}, dataType:'jsonp', success:function (data) { show(data) }, error:function(){ alert('查询失败,请重新查询') } }) }, error:function(){ alert('查询失败,请重新查询') } })
使用ajax封装好的跨域方法,dataType需要的值是jsonp,默认是用get方法。先简单说说这个过程,通过第三方api提供的url,进行第一次跨域请求,这个请求需要传入appkey这个数据,这个是我在这个api网站上请求数据的一个标识,第一次是进行城市代码的查询请求,通过输入城市名字进行到后台查询,是否有这个城市,有的话就返回对应的城市代码,没有就会出现警告。在我进行查询的时候,发现输入的城市名字必须要对应完整城市名,例如想查找广州需要打出完整广州市三个字,对使用者不太友好,于是做了个简单的正则进行判断(没有考虑同名城市的情况),使用这个正则在arr(一个有3000多个城市的数组)里面进行遍历寻找,通过检验就会返回这个城市(一个对象)
获得城市这个对象之后就会再次进行跨域请求,通过对象里的城市id去进行天气查询,这时候data需要传进城市的代码返回之后得到一个对象,然后通过回调函数show()进行数据的显示
下面我们看看这两次得到的data分别是什么
第一次获得的data:
第二次获得的data:
显示数据show():
function show(data){ let pic = `<img src="../chinaCtiyWeather/icon/weathercn/${data.result.img}.png" alt="${data.result.weather}">` let tag = `<span>${data.result.city}</span><span class="line">|</span><span>${data.result.date}</span><span class="line">|</span><span>${data.result.week}</span><span class="line">|</span><span>${data.result.weather}</span>` $("#info1").html(tag) $("#todaypic").html(pic) tag = `<p>今日温度:${data.result.temphigh}℃/${data.result.templow}℃ 风力:${data.result.windpower} 风向:${data.result.winddirect} 风速:${data.result.windspeed}</p>` $("#info2").html(tag) tag = `<p>紫外线强度:${data.result.index[2].ivalue} 运动指数:${data.result.index[1].ivalue} 感冒指数:${data.result.index[3].ivalue} 穿衣指数:${data.result.index[6].ivalue}</p>` $("#info3").html(tag) $("#box1").slideDown(1000,function(){ let tag = '' let arr = $(".smallbox") for (let index = 0; index < arr.length; index++) { tag = `<img src="../chinaCtiyWeather/icon/weathercn/${data.result.daily[index+1].day.img}.png" alt="${data.result.daily[index+1].day.weather}"> <p>${data.result.daily[index+1].date}</p> <p>${data.result.daily[index+1].week}</p> <p>${data.result.daily[index+1].day.weather}</p> <p>${data.result.daily[index+1].day.temphigh}℃/${data.result.daily[index+1].night.templow}℃</p> ` $("#smallbox"+index).html(tag) } $(".smallbox").slideDown(1000) }) }
通过这次的小练习,不仅练习了jq中ajax的使用,还回过头来对样式,正则,数组方法稍微进行了复习,收获不少
完整代码
html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="base.css"> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script> <script> $(function () { $("#city").focus() $("#btn1").click(function () { let city = $("#city").val() if(!city){ return } $("#city").val('') $(".smallbox").css("display","none") $("#box1").css("display","none") $.ajax({ url:'http://api.jisuapi.com/weather/city', data:{appkey:'5c5eac5030bbbf13'}, dataType:'jsonp', success:function(data){ let arr = data.result let reg = new RegExp(""+city+"") let city1 = arr.find((item)=>{ return reg.test(item.city) }) if(!city1){ alert('请输入正确的城市名') return } $.ajax({ url:"http://api.jisuapi.com/weather/query", data:{appkey:'5c5eac5030bbbf13',cityid:city1.cityid}, dataType:'jsonp', success:function (data) { show(data) }, error:function(){ alert('查询失败,请重新查询') } }) }, error:function(){ alert('查询失败,请重新查询') } }) }) }) function show(data){ let pic = `<img src="../chinaCtiyWeather/icon/weathercn/${data.result.img}.png" alt="${data.result.weather}">` let tag = `<span>${data.result.city}</span><span class="line">|</span><span>${data.result.date}</span><span class="line">|</span><span>${data.result.week}</span><span class="line">|</span><span>${data.result.weather}</span>` $("#info1").html(tag) $("#todaypic").html(pic) tag = `<p>今日温度:${data.result.temphigh}℃/${data.result.templow}℃ 风力:${data.result.windpower} 风向:${data.result.winddirect} 风速:${data.result.windspeed}</p>` $("#info2").html(tag) tag = `<p>紫外线强度:${data.result.index[2].ivalue} 运动指数:${data.result.index[1].ivalue} 感冒指数:${data.result.index[3].ivalue} 穿衣指数:${data.result.index[6].ivalue}</p>` $("#info3").html(tag) $("#box1").slideDown(1000,function(){ let tag = '' let arr = $(".smallbox") for (let index = 0; index < arr.length; index++) { tag = `<img src="../chinaCtiyWeather/icon/weathercn/${data.result.daily[index+1].day.img}.png" alt="${data.result.daily[index+1].day.weather}"> <p>${data.result.daily[index+1].date}</p> <p>${data.result.daily[index+1].week}</p> <p>${data.result.daily[index+1].day.weather}</p> <p>${data.result.daily[index+1].day.temphigh}℃/${data.result.daily[index+1].night.templow}℃</p> ` $("#smallbox"+index).html(tag) } $(".smallbox").slideDown(1000) }) } </script> </head> <body> <header> <h1>WEATHER</h1> <div id="searchCity"> <input type="text" id="city" placeholder="请输入城市名字"> <span><input type="button" value="查询天气" id="btn1"></span> </div> </header> <div id="container"> <div id="box1"> <div id="todaypic"><img src="../chinaCtiyWeather/icon/weathercn/1.png" alt="多云"></div> <div id="info1"><span>北京</span><span class="line">|</span><span>2019-03-13</span><span class="line">|</span><span>星期三</span><span class="line">|</span><span>多云</span></div> <div id="info2"><p>今日温度:16℃/2℃ 风力:3-4级转3-4级 风向:西北风转北风 风速:--</p></div> <div id="info3"><p>紫外线强度:---洗车指数:---感冒指数:---穿衣指数:---</p></div> </div> <div id="box2"> <div class="smallbox" id="smallbox0"> <div><img src="../chinaCtiyWeather/icon/weathercn/1.png" alt="多云"></div> <p>2019-03-14</p> <p>星期四</p> <p>中雨转小到中雨</p> <p>20℃/13℃</p> </div> <div class="smallbox" id="smallbox1"> <div><img src="../chinaCtiyWeather/icon/weathercn/1.png" alt="多云"></div> <p>2019-03-14</p> <p>星期四</p> <p>中雨转小到中雨</p> <p>20℃/13℃</p> </div> <div class="smallbox" id="smallbox2"> <div><img src="../chinaCtiyWeather/icon/weathercn/1.png" alt="多云"></div> <p>2019-03-14</p> <p>星期四</p> <p>中雨转小到中雨</p> <p>20℃/13℃</p> </div> <div class="smallbox" id="smallbox3"> <div><img src="../chinaCtiyWeather/icon/weathercn/1.png" alt="多云"></div> <p>2019-03-14</p> <p>星期四</p> <p>中雨转小到中雨</p> <p>20℃/13℃</p> </div> <div class="smallbox" id="smallbox4"> <div><img src="../chinaCtiyWeather/icon/weathercn/1.png" alt="多云"></div> <p>2019-03-14</p> <p>星期四</p> <p>中雨转小到中雨</p> <p>20℃/13℃</p> </div> </div> </div> </body> </html>
css:
*{ padding: 0; margin: 0; } body{ background: url(../chinaCtiyWeather/bg.jpg) no-repeat; } img{ width: 100px; height: 100px; } header{ width: 100%; height: 50px; padding-left: 80px; background: rgba(100, 100, 100, 0.6); box-sizing: border-box; } header>h1{ margin-right: 30px; float: left; } header>div{ float: left; } header >h1{ line-height: 50px; } #city{ width: 240px; height: 30px; margin-top: 10px; padding: 0 5px; font-size: 14px; border: 0; outline: none; float: left; } #btn1{ width: 70px; height: 30px; margin-top: 10px; line-height: 30px; background: rgba(255, 255, 255, 0.5); cursor: pointer; border: 0; outline: none; float: left; } #btn1:hover{ background: rgba(255, 255, 255, 0.4); } #container{ padding-left: 330px; } #box1{ width: 940px; height: 130px; margin: 90px 0 80px 0; box-sizing: border-box; padding-top: 10px; display: none; background: rgba(100, 100, 100, 0.3); } #todaypic{ float: left; } #todaypic img{ margin: 5px 55px 0 60px; } #info1{ font-size: 24px; } .line{ margin: 0 20px; } #info2,#info3{ margin-top: 15px; } #box2{ width: 940px; height: 210px; margin: 90px 0 80px 0; display: flex; justify-content: space-around; } .smallbox{ width: 150px; height: 210px; background: rgba(100, 100, 100, 0.3); text-align: center; display: none; } .smallbox img{ margin: 10px 0 5px 10px; }