碼上快樂

相關內容    簡體    繁體

ajax跨域練習-第三方api全國天氣查詢

本文轉載自   查看原文   2019-03-13 19:41   618 

最近學習了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;
}

　　

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 常用的第三方全國快遞物流單號查詢api對接 PHP 調第三方跨域接口示例 Vue axios調用第三方接口跨域解決 如何封裝第三方API nodejs 解決前端跨域之后端訪問第三方接口 VUE 使用axios請求第三方接口數據跨域問題解決 vue中通過第三方代理解決跨域問題 Vue請求第三方接口跨域最終解決辦法！2020最終版！ 前端頁面訪問第三方資源出現跨域問題 vue中解決axios請求第三方接口跨域問題
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM