jQuery+ajax中getJSON() 用法实例


Posted in Javascript onDecember 22, 2014

实例
从 test.js 载入 JSON 数据并显示 JSON 数据中一个 name 字段数据:

$.getJSON("test.js", function(json){

  alert("JSON Data: " + json.users[3].name);

});

定义和用法
通过 HTTP GET 请求载入 JSON 数据。

在 jQuery 1.2 中,您可以通过使用 JSONP 形式的回调函数来加载其他网域的 JSON 数据,如 "myurl?callback=?"。jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。 注意:此行以后的代码将在这个回调函数执行前执行。

语法
jQuery.getJSON(url,[data],[callback])

参数 描述
url 待载入页面的 URL 地址。
data 待发送 Key / value 参数。
callback 载入成功时执行的回调函数。

详细说明

该函数是简写的 Ajax 函数,等价于:

$.ajax({

  url: url,

  data: data,

  success: callback,

  dataType: json

});

发送到服务器的数据可作为查询字符串附加到 URL 之后。如果 data 参数的值是对象(映射),那么在附加到 URL 之前将转换为字符串,并进行 URL 编码。

传递给 callback 的返回数据,可以是 JavaScript 对象,或以 JSON 结构定义的数组,并使用 $.parseJSON() 方法进行解析。

更多实例

例子 1
从 Flickr JSONP API 载入 4 张最新的关于猫的图片:

HTML 代码:

<div id="images"></div>

jQuery 代码:

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?

tags=cat&tagmode=any&format=json&jsoncallback=?", function(data){

  $.each(data.items, function(i,item){

    $("<img/>").attr("src", item.media.m).appendTo("#images");

    if ( i == 3 ) return false;

  });

});

例子 2
从 test.js 载入 JSON 数据,附加参数,显示 JSON 数据中一个 name 字段数据:

$.getJSON("test.js", { name: "John", time: "2pm" }, function(json){

  alert("JSON Data: " + json.users[3].name);

});
Javascript 相关文章推荐
javascript操作cookie_获取与修改代码
May 21 Javascript
基于jquery实现的移入页面上空文本框时,让它变为焦点,移出清除焦点
Jul 26 Javascript
Jquery 表格合并的问题分享
Sep 17 Javascript
JSON无限折叠菜单编写实例
Dec 16 Javascript
window.open 以post方式传递参数示例代码
Feb 27 Javascript
js分页工具实例
Jan 28 Javascript
JavaScript构造函数详解
Dec 27 Javascript
Node.js环境下编写爬虫爬取维基百科内容的实例分享
Jun 12 Javascript
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
Sep 02 Javascript
js实现无缝滚动图
Feb 22 Javascript
详解在微信小程序的JS脚本中使用Promise来优化函数处理
Mar 06 Javascript
快速对接payjq的个人微信支付接口过程解析
Aug 15 Javascript
IE8中动态创建script标签onload无效的解决方法
Dec 22 #Javascript
javascript的日期对象、数组对象、二维数组使用说明
Dec 22 #Javascript
javascript中的遍历for in 以及with的用法
Dec 22 #Javascript
Jquery实现图片预加载与延时加载的方法
Dec 22 #Javascript
javascript定义变量时加var与不加var的区别
Dec 22 #Javascript
javascript操作字符串的原生方法
Dec 22 #Javascript
JavaScript动态创建link标签到head里的方法
Dec 22 #Javascript
You might like
约瑟夫环问题的PHP实现 使用PHP数组内部指针操作函数
2010/10/12 PHP
Yii2创建表单(ActiveForm)方法详解
2016/07/23 PHP
一段利用WSH获取登录时间的jscript代码
2008/05/11 Javascript
使用Jquery获取带特殊符号的ID 标签的方法
2014/04/30 Javascript
jquery控制页面部分刷新的方法
2015/06/24 Javascript
AngularJS入门教程之AngularJS 模板
2016/08/18 Javascript
Ubuntu 16.04 64位中搭建Node.js开发环境教程
2016/10/19 Javascript
JavaScript获取select中text值的方法
2017/02/13 Javascript
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
2017/09/05 Javascript
微信小程序自定义轮播图
2018/11/04 Javascript
jQuery操作attr、prop、val()/text()/html()、class属性
2019/05/23 jQuery
微信小程序引入模块中wxml、wxss、js的方法示例
2019/08/09 Javascript
js实现窗口全屏示例详解
2019/09/17 Javascript
使用JS来动态操作css的几种方法
2019/12/18 Javascript
js实现类选择器和name属性选择器的示例步骤
2021/02/07 Javascript
Python比较两个图片相似度的方法
2015/03/13 Python
Python中属性和描述符的正确使用
2016/08/23 Python
Python 搭建Web站点之Web服务器网关接口
2016/11/06 Python
使用python 和 lint 删除项目无用资源的方法
2017/12/20 Python
wxPython的安装图文教程(Windows)
2017/12/28 Python
python从子线程中获得返回值的方法
2019/01/30 Python
python常用库之NumPy和sklearn入门
2019/07/11 Python
python各层级目录下import方法代码实例
2020/01/20 Python
Python闭包装饰器使用方法汇总
2020/06/29 Python
Python pandas对excel的操作实现示例
2020/07/21 Python
python中复数的共轭复数知识点总结
2020/12/06 Python
C语言笔试题回忆
2015/04/02 面试题
学习心得体会
2014/01/01 职场文书
小学教师个人总结
2015/02/05 职场文书
淘宝文案策划岗位职责
2015/04/14 职场文书
你有一份《诚信考试承诺书》待领取
2019/11/13 职场文书
pytorch中的numel函数用法说明
2021/05/13 Python
python 命令行传参方法总结
2021/05/25 Python
RPM包方式安装Oracle21c的方法详解
2021/08/23 Oracle
Mysql查询时间区间日期列表,不会由于数据表数据影响
2022/04/19 MySQL
Python tensorflow卷积神经Inception V3网络结构
2022/05/06 Python