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 相关文章推荐
Jquery 快速构建可拖曳的购物车DragDrop
Nov 30 Javascript
关于JavaScript中var声明变量作用域的推断
Dec 16 Javascript
Javascript事件实例详解
Nov 06 Javascript
javasctipt如何显示几分钟前、几天前等
Apr 30 Javascript
JavaScript+html5 canvas实现图片破碎重组动画特效
Feb 22 Javascript
Bootstrap模块dropdown实现下拉框响应
May 22 Javascript
谈谈Vue.js——vue-resource全攻略
Jan 16 Javascript
如何写好你的JavaScript【推荐】
Mar 02 Javascript
教你快速搭建Node.Js服务器的方法教程
Mar 30 Javascript
ES6中module模块化开发实例浅析
Apr 06 Javascript
layui中layer前端组件实现图片显示功能的方法分析
Oct 13 Javascript
jquery在启动页面时,自动加载数据的实例
Jan 22 jQuery
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 8小时时间差的解决方法小结
2009/12/22 PHP
无法载入 mcrypt 扩展,请检查 PHP 配置终极解决方案
2011/07/18 PHP
php调用mysql存储过程实例分析
2014/12/29 PHP
微信公众平台开发之天气预报功能
2015/08/31 PHP
PHP简单获取及判断提交来源的方法
2016/04/22 PHP
javascript编程起步(第六课)
2007/01/10 Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
2010/09/03 Javascript
JavaScript事件委托的技术原理探讨示例
2014/04/17 Javascript
jQuery实现Twitter的自动文字补齐特效
2014/11/28 Javascript
JQuery实现超链接鼠标提示效果的方法
2015/06/10 Javascript
JS中的进制转换以及作用
2016/06/26 Javascript
BootstrapValidator超详细教程(推荐)
2016/12/07 Javascript
layer实现弹窗提交信息
2016/12/12 Javascript
bootstrap 表单验证使用方法
2017/01/11 Javascript
vue 导航内容设置选中状态样式的例子
2019/11/01 Javascript
layui清除radio的选中状态实例
2019/11/14 Javascript
Vue中通过属性绑定为元素绑定style行内样式的实例代码
2020/04/30 Javascript
[47:04]EG vs RNG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
pandas 获取季度,月度,年度首尾日期的方法
2018/04/11 Python
python 读写文件,按行修改文件的方法
2018/07/12 Python
浅谈Python3实现两个矩形的交并比(IoU)
2020/01/18 Python
python如何通过闭包实现计算器的功能
2020/02/22 Python
浅谈Python中range与Numpy中arange的比较
2020/03/11 Python
Python读取Excel数据并生成图表过程解析
2020/06/18 Python
Merrell迈乐澳大利亚网站:购买户外登山鞋
2017/05/28 全球购物
上海雨人软件技术开发有限公司测试题
2015/07/14 面试题
本科毕业自我鉴定
2014/03/20 职场文书
员工团队活动方案
2014/08/28 职场文书
环卫处个人工作总结
2015/03/04 职场文书
工作简报格式范文
2015/07/21 职场文书
2015年秋季校长开学典礼致辞
2015/07/29 职场文书
餐厅开业活动方案
2019/07/08 职场文书
Python Pandas知识点之缺失值处理详解
2021/05/11 Python
Python爬取英雄联盟MSI直播间弹幕并生成词云图
2021/06/01 Python
分析Python list操作为什么会错误
2021/11/17 Python
20180830晚上第一届KSL半决赛 雨神vs解冻(二龙 三炮解说)
2022/04/01 星际争霸