ajax跨域练习-第三方api全国天气查询

其他 2019-03-13 19:58:05 阅读次数: 0

最近学习了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;
}

　　

猜你喜欢

转载自www.cnblogs.com/Gzzzh/p/10525634.html
今日推荐
Linus “吃狗粮”最积极！
开源日报 | Winamp播放器即将开源；生成式AI之战升级第二轮；Linus“吃狗粮”最积极；AI进入泡沫前期；吴泳铭为阿里云带来了什么？
NetBSD 禁止提交由 AI 生成的代码
Apache Doris 2.0.10 版本正式发布！
开源日报 | 大模型开战；大模型独角兽被曝卖身；周鸿祎建议谷歌开源所有产品；最大开源AI社区提供1000万美元共享GPU
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
周排行
SVN服务端安装在阿里云
实战 | 相机标定
webpack核心概念
note20——》只要肯低头吃苦，人生就会有救
PAT甲级 1062 Talent and Virtue （25 分）排序
NG Toolset开发笔记--5GNR Resource Grid（26）
如何对待上司
oracle命令
第9章 STL迭代器
logstash使用es映射模板
每日归档
更多
2024-05-20(36)
2024-05-19(0)
2024-05-18(4)
2024-05-17(34)
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022