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 相关文章推荐
js 动态添加标签(新增一行,其实很简单,就是几个函数的应用)
Mar 26 Javascript
Jquery中显示隐藏的实现代码分析
Jul 26 Javascript
获取客户端电脑日期时间js代码(jquery)
Sep 12 Javascript
JQ获取动态加载的图片大小的正确方法分享
Nov 08 Javascript
javascript日期对象格式化为字符串的实现方法
Jan 14 Javascript
jQuery解决浏览器兼容性问题案例分析
Apr 15 Javascript
AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】
Nov 02 Javascript
AngularJS中一般函数参数传递用法分析
Nov 22 Javascript
vue弹窗组件使用方法
Apr 28 Javascript
ES6中的class是如何实现的(附Babel编译的ES5代码详解)
May 17 Javascript
解决vue动态路由异步加载import组件,加载不到module的问题
Jul 26 Javascript
Angular处理未可知异常错误的方法详解
Jan 17 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 md5下16位和32位的实现代码
2008/04/09 PHP
php URL跳转代码 减少外链
2011/06/25 PHP
PHP函数preg_match_all正则表达式的基本使用详细解析
2013/08/31 PHP
Linux php 中文乱码的快速解决方法
2016/05/13 PHP
javascript的创建多行字符串的7种方法
2014/04/29 Javascript
详解Nodejs基于mongoose模块的增删改查的操作
2016/12/21 NodeJs
浅谈JavaScript 代码简洁之道
2019/01/09 Javascript
VUE单页面切换动画代码(全网最好的切换效果)
2019/10/31 Javascript
d3.js实现图形拖拽
2019/12/19 Javascript
vscode 插件开发 + vue的操作方法
2020/06/05 Javascript
JS实现联想、自动补齐国家或地区名称的功能
2020/07/07 Javascript
Python两个整数相除得到浮点数值的方法
2015/03/18 Python
按日期打印Python的Tornado框架中的日志的方法
2015/05/02 Python
Python脚本简单实现打开默认浏览器登录人人和打开QQ的方法
2016/04/12 Python
python下setuptools的安装详解及No module named setuptools的解决方法
2017/07/06 Python
Python实现的堆排序算法示例
2018/04/29 Python
python 用lambda函数替换for循环的方法
2018/06/09 Python
python 列表递归求和、计数、求最大元素的实例
2018/11/28 Python
selenium+python截图不成功的解决方法
2019/01/30 Python
html5实现图片转圈的动画效果——让页面动起来
2017/10/16 HTML / CSS
常用UNIX 命令(Linux的常用命令)
2013/07/10 面试题
楼面部长岗位职责范本
2014/02/14 职场文书
初三学习计划书范文
2014/04/30 职场文书
政府采购方案
2014/06/12 职场文书
和谐社区口号
2014/06/19 职场文书
承诺书模板
2014/08/30 职场文书
大学本科生职业生涯规划书范文
2014/09/14 职场文书
教师拔河比赛广播稿
2014/10/14 职场文书
关于群众路线的心得体会
2014/11/05 职场文书
员工评语范文
2014/12/31 职场文书
审美与表现自我评价
2015/03/09 职场文书
2016大学迎新欢迎词
2015/09/29 职场文书
《花钟》教学反思
2016/02/17 职场文书
幼儿园2016圣诞节活动总结
2016/03/31 职场文书
MySQL慢查询的坑
2021/04/28 MySQL
flex弹性布局详解
2022/03/20 HTML / CSS