设为首页收藏本站

IT技术擎 - 最棒的IT web技术交流社区

 找回密码
 注册为IT技术擎人

QQ登录

只需一步,快速开始

搜索
热搜: php h5 jquery
查看: 22|回复: 0

[未分类] ajax请求网络api

[复制链接]
发表于 2018-9-10 19:55:19 | 显示全部楼层 |阅读模式
不啰嗦,直接上代码:
1、在浏览器输入网址:http://api.asilu.com/weather/?callback=getname &city=深圳
你会看到如下结果:他返回的是json数据
  1. /** api.asilu.com **/getname({"city":"深圳","pm25":"28","weather":[{"date":"周一 09月10日","icon1":"day\/duoyun","icon2":"night\/duoyun","weather":"多云","wind":"无持续风向微风","temp":"31 ~ 25℃"},{"date":"周二","icon1":"day\/duoyun","icon2":"night\/duoyun","weather":"多云","wind":"无持续风向微风","temp":"31 ~ 27℃"},{"date":"周三","icon1":"day\/leizhenyu","icon2":"night\/leizhenyu","weather":"雷阵雨","wind":"东风4-5级","temp":"31 ~ 26℃"},{"date":"周四","icon1":"day\/zhenyu","icon2":"night\/zhenyu","weather":"阵雨","wind":"东风3-4级","temp":"30 ~ 26℃"}],"date":"2018-09-10","id":"101280601","t":1536508800});
复制代码
整理之后是这样的:
  1. /** api.asilu.com **/getname({"city": "深圳", "pm25": "28", "weather": [{"date": "周一 09月10日", "icon1": "day\/duoyun", "icon2": "night\/duoyun", "weather": "多云", "wind": "无持续风向微风", "temp": "31 ~ 25℃" }, {"date": "周二", "icon1": "day\/duoyun", "icon2": "night\/duoyun", "weather": "多云", "wind": "无持续风向微风", "temp": "31 ~ 27℃" }, {"date": "周三", "icon1": "day\/leizhenyu", "icon2": "night\/leizhenyu", "weather": "雷阵雨", "wind": "东风4-5级", "temp": "31 ~ 26℃" }, {"date": "周四", "icon1": "day\/zhenyu", "icon2": "night\/zhenyu", "weather": "阵雨", "wind": "东风3-4级", "temp": "30 ~ 26℃" }], "date": "2018-09-10", "id": "101280601", "t": 1536508800
  2. });
复制代码
2、怎样才能获取上述json的数据呢?很简单:
  1. <!DOCTYPE html > <html > <head > <meta charset="UTF-8" > <title >ajax </title > </head > <body > <h1 >天气查询 </h1 > <input type="text"placeholder="请输出你的地址"id="tel"/ > <button id="ajax" >确定 </button > <p > <span id="reslut" > </span > </p > <script type="text/javascript"src="jquery-3.3.1/jquery-3.3.1.js" > </script > <script type="text/javascript" > $(function(){ $('#ajax').on('click',function(){var$telValue=$('#tel').val();if($telValue=="") { alert('不能为空!');return; } $.ajax({ type: 'GET', dataType:'jsonp', url: 'http://api.asilu.com/weather/?callback=getname &city='+$telValue, success: function(data){varreslutData=data; console.log(reslutData); $('#reslut').text("你查询的是:"+reslutData.city+","+"明天的天气是:"+reslutData.weather[0].weather); } }) }) }) </script > </body > </html >
复制代码
3、效果图是这样的:


4、完毕。



上一篇:Linux-计划任务
下一篇:java中String、StringBuffer、StringBuilder的区别
该用户未在地球留下任何的痕迹

本版积分规则

QQ|小黑屋|帮助|IT技术擎 ( 沪ICP备15054863号  

GMT+8, 2018-10-18 11:37

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表