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 innerHTML、outerHTML、innerText、outerText的区别
Nov 24 Javascript
深入理解JavaScript系列(14) 作用域链介绍(Scope Chain)
Apr 12 Javascript
THREE.JS入门教程(1)THREE.JS使用前了解
Jan 24 Javascript
js中如何把字符串转化为对象、数组示例代码
Jul 17 Javascript
javascript 获取网页标题代码实例
Jan 22 Javascript
Bootstrap精简教程
Nov 27 Javascript
JavaScript获取客户端IP的方法(新方法)
Mar 11 Javascript
jQuery+HTML5+CSS3制作支持响应式布局时间轴插件
Aug 10 Javascript
AngularJS自定义服务与fliter的混合使用
Nov 24 Javascript
jQuery源码解读之extend()与工具方法、实例方法详解
Mar 30 jQuery
easyui datagrid 表格中操作栏 按钮图标不显示的解决方法
Jul 27 Javascript
详解JavaScript中的链式调用
Nov 27 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
缅甸的咖啡简史
2021/03/04 咖啡文化
php array_walk_recursive 使用自定的函数处理数组中的每一个元素
2016/11/16 PHP
PHP中单例模式与工厂模式详解
2017/02/17 PHP
Laravel学习教程之从入口到输出过程详解
2017/08/27 PHP
复制本贴标题和地址的js代码
2008/07/01 Javascript
JavaScript学习笔记(十)
2010/01/17 Javascript
Javascript获取HTML静态页面参数传递值示例
2013/08/18 Javascript
JQuery报错Uncaught TypeError: Illegal invocation的处理方法
2015/03/13 Javascript
js实现不提交表单获取单选按钮值的方法
2015/08/21 Javascript
详解WordPress开发中get_current_screen()函数的使用
2016/01/11 Javascript
js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
2016/01/27 Javascript
jquery.serialize() 函数语法及简单实例
2016/07/08 Javascript
原生js实现jquery函数animate()动画效果的简单实例
2016/08/21 Javascript
javascript设计模式之中介者模式学习笔记
2017/02/15 Javascript
Bootstrap显示与隐藏简单实现代码
2017/03/06 Javascript
NodeJS实现不可逆加密与密码密文保存的方法
2018/03/16 NodeJs
vue项目部署上线遇到的问题及解决方法
2018/06/10 Javascript
Angularjs之ngModel中的值验证绑定方法
2018/09/13 Javascript
详解如何使用webpack打包多页jquery项目
2019/02/01 jQuery
vue中解决微信html5原生ios虚拟键返回不刷新问题
2020/10/20 Javascript
vue用ant design中table表格,点击某行时触发的事件操作
2020/10/28 Javascript
[54:26]完美世界DOTA2联赛PWL S3 Forest vs Rebirth 第一场 12.10
2020/12/12 DOTA
Python3 Random模块代码详解
2017/12/04 Python
Python使用os.listdir()和os.walk()获取文件路径与文件下所有目录的方法
2019/04/01 Python
解决在pycharm运行代码,调用CMD窗口的命令运行显示乱码问题
2019/08/23 Python
Python 中list ,set,dict的大规模查找效率对比详解
2019/10/11 Python
python使用html2text库实现从HTML转markdown的方法详解
2020/02/21 Python
如何利用python 读取配置文件
2021/01/06 Python
Canvas实现贝赛尔曲线轨迹动画的示例代码
2019/04/25 HTML / CSS
Vans澳大利亚官网:购买鞋子、服装及配件
2019/09/05 全球购物
写自荐信的七个技巧
2013/10/15 职场文书
大学校园毕业自我鉴定
2014/01/15 职场文书
网络技术专业求职信
2014/05/02 职场文书
文员岗位职责范本
2015/04/16 职场文书
2015小学教师年度考核工作总结
2015/05/12 职场文书
加班费申请报告
2015/05/15 职场文书