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 相关文章推荐
提高网站信任度的技巧
Oct 17 Javascript
Javascript 判断Flash是否加载完成的代码
Apr 12 Javascript
如何确保JavaScript的执行顺序 之jQuery.html并非万能钥匙
Mar 03 Javascript
多个js与css文件的合并方法详细说明
Dec 26 Javascript
浅析jQuery1.8的几个小变化
Dec 10 Javascript
JavaScript中扩展Array contains方法实例
Aug 23 Javascript
javascript中传统事件与现代事件
Jun 23 Javascript
第一次接触神奇的Bootstrap导航条
Aug 09 Javascript
vue2.0使用Sortable.js实现的拖拽功能示例
Feb 21 Javascript
js微信应用场景之微信音乐相册案例分享
Aug 11 Javascript
详解微信小程序调起键盘性能优化
Jul 24 Javascript
JS中的算法与数据结构之列表(List)实例详解
Aug 16 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生成自己的LOG文件
2006/10/09 PHP
探讨方法的重写(覆载)详解
2013/06/08 PHP
php中jpgraph类库的使用介绍
2013/08/08 PHP
php数组遍历类与用法示例
2019/05/24 PHP
新老版本juqery获取radio对象的方法
2010/03/01 Javascript
JS 显示当前日期与时间的代码
2010/03/24 Javascript
JavaScript、tab切换完整版(自动切换、鼠标移入停止、移开运行)
2016/01/05 Javascript
jQuery控制控件文本的长度的操作方法
2016/12/05 Javascript
JS无缝滚动效果实现方法分析
2016/12/21 Javascript
理解javascript中的Function.prototype.bind的方法
2017/02/03 Javascript
JavaScript数据结构之二叉查找树的定义与表示方法
2017/04/12 Javascript
Angular指令之restict匹配模式的详解
2017/07/27 Javascript
全选复选框JavaScript编写小结(附代码)
2017/08/16 Javascript
在vue中获取微信支付code及code被占用问题的解决方法
2019/04/16 Javascript
Angular2实现的秒表及改良版示例
2019/05/10 Javascript
JS拖动选择table里的单元格完整实例【基于jQuery】
2019/05/28 jQuery
微信小程序实现滚动加载更多的代码
2019/12/06 Javascript
node.js爬虫框架node-crawler初体验
2020/10/29 Javascript
Python3基础之list列表实例解析
2014/08/13 Python
Python的shutil模块中文件的复制操作函数详解
2016/07/05 Python
python django 实现验证码的功能实例代码
2017/05/18 Python
python web.py开发httpserver解决跨域问题实例解析
2018/02/12 Python
pytorch训练imagenet分类的方法
2018/07/27 Python
使用python采集脚本之家电子书资源并自动下载到本地的实例脚本
2018/10/23 Python
python文档字符串(函数使用说明)使用详解
2019/07/30 Python
python使用 request 发送表单数据操作示例
2019/09/25 Python
Python Numpy,mask图像的生成详解
2020/02/19 Python
keras 自定义loss model.add_loss的使用详解
2020/06/22 Python
Python numpy矩阵处理运算工具用法汇总
2020/07/13 Python
Python Flask异步发送邮件实现方法解析
2020/08/01 Python
HTML5里autofocus自动聚焦属性使用介绍
2016/06/22 HTML / CSS
介绍一下Ruby的特点
2013/01/20 面试题
商学院大学生求职的自我评价
2014/03/12 职场文书
爱情保证书大全
2014/04/29 职场文书
企业文化宣传标语
2014/06/09 职场文书
不同品牌、不同型号对讲机如何互相通联
2022/02/18 无线电