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开发时的五个注意事项
Dec 08 Javascript
防止页面被iframe(兼容IE,Firefox火狐)
Jul 04 Javascript
js实现随屏幕滚动的带缓冲效果的右下角广告代码
Sep 04 Javascript
JavaScript的代码编写格式规范指南
Dec 07 Javascript
javascript插件开发的一些感想和心得
Feb 28 Javascript
微信小程序购物商城系统开发系列-工具篇的介绍
Nov 21 Javascript
AngularJS实现表单验证功能
Jan 09 Javascript
Vue组件化通讯的实例代码
Jun 23 Javascript
轻量级JS Cookie插件js-cookie的使用方法
Mar 22 Javascript
vue组件实现可搜索下拉框扩展
Oct 23 Javascript
JS使用对象的defineProperty进行变量监控操作示例
Feb 02 Javascript
JavaScript原型链中函数和对象的理解
Jun 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数据库连接
2006/10/09 PHP
php入门学习知识点六 PHP文件的读写操作代码
2011/07/14 PHP
php让json_encode不自动转义斜杠“/”的方法
2020/04/27 PHP
js限制文本框输入长度两种限制方式(长度、字节数)
2012/12/19 Javascript
node.js中的fs.close方法使用说明
2014/12/17 Javascript
AngularJS学习笔记之TodoMVC的分析
2015/02/22 Javascript
深入理解Angular2 模板语法
2016/08/07 Javascript
JS继承之借用构造函数继承和组合继承
2016/09/07 Javascript
KnockoutJS 3.X API 第四章之数据控制流foreach绑定
2016/10/10 Javascript
ajax图片上传,图片异步上传,更新实例
2016/12/30 Javascript
总结几道关于Node.js的面试问题
2017/01/11 Javascript
求js数组的最大值和最小值的四种方法
2017/03/03 Javascript
JavaScript基于activexobject连接远程数据库SQL Server 2014的方法
2017/07/12 Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
2017/12/14 Javascript
Vue SSR 组件加载问题
2018/05/02 Javascript
基于Vue中使用节流Lodash throttle详解
2019/10/30 Javascript
vue自定义switch开关组件,实现样式可自行更改
2019/11/01 Javascript
js+canvas实现纸牌游戏
2020/03/16 Javascript
Vue 请求传公共参数的操作
2020/07/31 Javascript
python字符串中匹配数字的正则表达式
2019/07/03 Python
selenium 多窗口切换的实现(windows)
2020/01/18 Python
Django用数据库表反向生成models类知识点详解
2020/03/25 Python
JACK & JONES瑞典官方网站:杰克琼斯欧式风格男装
2017/12/23 全球购物
俄罗斯香水和化妆品购物网站:Л’Этуаль
2018/05/10 全球购物
印尼在线旅游门户网站:NusaTrip
2019/11/01 全球购物
Trip.com澳大利亚:在线旅行社
2019/12/01 全球购物
教师实习自我鉴定
2013/12/13 职场文书
日语专业个人求职信范文
2014/02/02 职场文书
网络管理员岗位职责
2014/03/17 职场文书
2015年初中元旦晚会活动总结
2014/11/28 职场文书
2014小学语文教师个人工作总结
2014/12/03 职场文书
浅谈:电影《孔子》观后感(范文)
2019/10/14 职场文书
超级实用!五步法则,教你写好年终工作总结
2019/12/05 职场文书
Html5调用企业微信的实现
2021/04/16 HTML / CSS
日本十大血腥动漫,那些被禁播的动漫盘点
2022/03/21 日漫
Navicat Premium自定义 sql 标签的创建方式
2022/09/23 数据库