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.resultlet 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.resultlet 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;
}

转载于:https://www.cnblogs.com/Gzzzh/p/10525634.html

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

以短链服务为例，探讨免AppKey、免认证、Ajax跨域调用新浪微博API
新浪微博的API官方提供了很多种调用方式,支持编程的,归根结底就是两种: 1.基于Oauth协议,使用Open API.(http://open.weibo.com/wiki/%E6%8E%88%E6 ...
$.ajax 跨域请求 Web Api
WepApi确实方便好用,没有配置文件,一个apicontroller直接可以干活了.但今天用$.ajax跨域请求的时候总是获取不到数据,用fiddler一看确实抓到了数据,但回到$.ajax函数中, ...
ajax跨域解决方案
一.什么是AJAX? Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术.Ajax 允许在不干扰 ...
AJAX跨域访问（不同域之间相互访问）
目录一.跨域: 二.同源策略: 三.解决Ajax跨域问题的方案: 方案一:设置响应头方案二:jsonp 方案三:jQuery封装jsonp 方案四:代理机制(httpclient) 方案五:ngi ...
ajax 跨域请求数据,JQuery Ajax执行跨域请求数据的解决方案
JQuery Ajax执行跨域请求数据的解决方案今天前端因为需要ajax调用两个不同的项目,请求域不一样,所以涉及ajax跨域的问题 ,其实很简单,具体如下原来的ajax请求如下: $.ajax( ...
AJAX跨域问题及解决方案
文章目录跨域哪些方式可以进行跨域部署服务器部署模块 ajax1 ajax2 测试跨域解决方案方案1:设置响应头方案2:jsonp 深入一下jsonp 方案3:代理机制(httpclien ...
Ajax跨域：Jsonp原理解析
推荐先看下这篇文章:JS跨域(ajax跨域.iframe跨域)解决方法及原理详解(jsonp) JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重 ...
ajax跨域问题解决方案
今天来记录一下关于ajax跨域的一些问题.以备不时之需. 跨域同源策略限制同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性.也就是说,受到请求的 URL 的域必须与当前 Web 页面 ...
JSONP实现Ajax跨域请求
前言由于浏览器存在同源策略的机制,所谓同源策略就是阻止从一个源(域名,包括同一个根域名下的不同二级域名)加载的文档或者脚本获取/或者设置另一个源加载的文档属性. 但比较特别的是:由于同源策略是浏览器 ...

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

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

最新文章

热门文章