ajax请求网络api
不啰嗦，直接上代码：
1、在浏览器输入网址：http://api.asilu.com/weather/?callback=getname&city=深圳
你会看到如下结果：他返回的是json数据
/** api.asilu.com **/getname({"city":"深圳","pm25":"","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":"","t":});
整理之后是这样的：
/** api.asilu.com **/
getname({
"city": "深圳",
"pm25": "",
"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": "",
"t":
});
2、怎样才能获取上述json的数据呢？很简单：
<!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){
var reslutData=data;
console.log(reslutData);
$('#reslut').text("你查询的是:"+reslutData.city+","+"明天的天气是:"+reslutData.weather[].weather);
}
})
})
})
</script>
</body>
</html>
3、效果图是这样的：
4、完毕。
ajax请求网络api的更多相关文章
- angularjs之$ajax请求
AngularJS不仅仅只有双向绑定等等功能,还有发送Ajax请求的Api. 效果图: 请求的文件(data.php): <?php $data = [ '股市下跌', '清明小长假结束', ' ...
- HTTP请求封装：Ajax与RESTful API
一.HTTP请求 HTTP即超文本传输协议,用以进行HTML 文件. 图片文件. 查询结果等的网络传输. 一个完整的HTTP请求包括:请求行.请求头.空行和请求数据(请求数据可以为空) HTTP1.1 ...
- C#中缓存的使用 ajax请求基于restFul的WebApi(post、get、delete、put) 让 .NET 更方便的导入导出 Excel .net core api +swagger(一个简单的入门demo 使用codefirst+mysql) C# 位运算详解 c# 交错数组 c# 数组协变 C# 添加Excel表单控件（Form Controls） C#串口通信程序
C#中缓存的使用 缓存的概念及优缺点在这里就不多做介绍,主要介绍一下使用的方法. 1.在ASP.NET中页面缓存的使用方法简单,只需要在aspx页的顶部加上一句声明即可: <%@ Outp ...
- 实战：ajax带参数请求slim API
restful api 支持get,post,put,delete等方法,那么jquery客户端怎么去实现呢?涉及到跨域又怎么办? 很多时候需要传递一个token(api_key) 去识别用户身份,获 ...
- ajax GET和POST请求web api 的几种方式
GET请求 1.无参数get请求 一般get请求有两种写法,一种是 $.get() 一种是$.ajax({type:"get"}), 我个人比较喜欢用后者. 下面例子主要是ge ...
- 解决React Native使用Fetch API请求网络报Network request failed
问题来源: 1 . 在测试fetch数据请求时,Xcode9.0以上的无法请求https, 需要在Xcode中加载项目后修改Info.plist的相关配置,具体如下参考 问题及解决方法一模一样,不再重 ...
- 使用js+Ajax请求API接口数据-带请求头方式
C# http请求带请求头部分 先上代码: <script type="text/javascript"> function zLoginCheck() { var A ...
- web api 解决Ajax请求跨域问题
前端ajax请求接口时,经常出现跨域问题,当然了解决方法有很多种,比如: http://www.jb51.net/article/68424.htm 我本人恰好前后端都会一点,所以直接在接口端处理. ...
- APICloud ajax请求api数据问题
云编译开启全局加密的情况下,请务必使用api.ajax,避免使用JQ等框架的ajax,否则将引起请求失败.官网API说明链接 还要就是要注意用$.ajax请求数据时会出现的同源策略问题.
随机推荐
- python基础一 ------排序和查找算法
插入排序; 假设数组长度为n,先从第二个元素开始,与前一个元素比较,之后将较小的元素 放在前面,现在前两个元素是有顺序的,这时取第三个元素,与前一个元素(也就是第二个)比较,较小的放在前面 ...
- 潭州课堂25班：Ph201805201 tornado 项目 第八课 增加喜欢功能（课堂笔记）
tornado 相关说明 新增一个页面,用来做图片收藏, 还要在 account.py 创建一个数据库表,记录用户喜欢的图片,哪些图片用户疯狂传奇 cd 到 项目目录下,执行数据库更新 alembic ...
- Ubuntu安装VLC播放器
Ubuntu安装VLC官方介绍:http://www.videolan.org/vlc/download-ubuntu.html sudo apt-get update sudo apt-get in ...
- Hibernate 对象关系映射文件
简介: POJO 类和关系型数据库之间的映射可以用一个 XML 文档来定义 通过 POJO 类的数据库映射文件,Hibernate 可以理解持久化类和数据表之间的对应关系,也可以理解持久化类属性与数据 ...
- larave异步多图片上传的实现和注意事项及$file的对象函数
要使用多图片上传,首先要在input添加multipart,同时注意name的参数要加[],不然,不算是数组.具体如下,注意绿色地方.如果是单张图片,把[]去掉,不要multiple; <inp ...
- @ConfigurationProperties注解取消location属性
当我正在自学如何自定义properties配置文件,为了防止不必要的麻烦,重新创建了一个新的properties文件 fu.properties 然后在自定义的配置类中引入fu.properties/ ...
- 添加spring-boot-devtools热部署报错
使用的eclipse部署的spring boot,百度了下,大部分的问题都是说IDE工具使用热部署无法成功的解决方案,看了很懵逼 <!-- 热部署模块 --> <dependency ...
- Ringo替换Paul
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- CentOS启动docker1.13失败(Job for docker.service failed because the control process exited with error code. See "systemctl status docker.service" and "journalctl -xe" for details.)
一.启动失败 1.启动docker [root@localhost ~]# systemctl start docker Job for docker.service failed because t ...
- Ehcache 3.7文档—基础篇—JCache aka JSR-107
一. 概述JCache Java临时缓存API(JSR-107),也被称为JCache,它是一个规范在javax.cache.API中定义的.该规范是在Java Community Process下开 ...