ajax跨域練習-第三方api全國天氣查詢
阿新 • • 發佈：2019-03-13
技術 jsonp success 20px image ack item 請求 width
最近學習了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;
}
ajax跨域練習-第三方api全國天氣查詢