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 相关文章推荐
ExtJS下grid的一些属性说明
Dec 13 Javascript
JavaScript中OnLoad几种使用方法
Dec 15 Javascript
JavaScript转换农历类实现及调用方法
Jan 27 Javascript
js中的replace方法使用介绍
Oct 28 Javascript
使用CSS样式position:fixed水平滚动的方法
Feb 19 Javascript
js中settimeout方法加参数的使用实例
Feb 27 Javascript
JavaScript DOM节点操作方法总结
Aug 23 Javascript
js简单获取表单中单选按钮值的方法
Aug 23 Javascript
微信小程序 前端源码逻辑和工作流详解
Oct 08 Javascript
js 实现获取name 相同的页面元素并循环遍历的方法
Feb 14 Javascript
Vue.js事件处理器与表单控件绑定详解
Mar 20 Javascript
基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)
Nov 02 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/12/06 PHP
PHP4中session登录页面的应用
2008/07/25 PHP
mysql 性能的检查和优化方法
2009/06/21 PHP
JpGraph php柱状图使用介绍
2011/08/23 PHP
解析PHP中的正则表达式以及模式匹配
2013/06/19 PHP
ThinkPHP模板判断输出Present标签用法详解
2014/06/30 PHP
深入理解PHP中的global
2014/08/19 PHP
php用wangeditor3实现图片上传功能
2019/08/22 PHP
toString()一个会自动调用的方法
2010/02/08 Javascript
jquery属性选择器not has怎么写 行悬停高亮显示
2013/11/13 Javascript
Javascript全局变量var与不var的区别深入解析
2013/12/09 Javascript
jquery根据属性和index来查找属性值并操作
2014/07/25 Javascript
DOM基础教程之使用DOM + Css
2015/01/20 Javascript
使用NodeJs 开发微信公众号(三)微信事件交互实例
2016/03/02 NodeJs
关于页面刷新vuex数据消失问题解决方案
2017/07/03 Javascript
Angular实现的table表格排序功能完整示例
2017/12/22 Javascript
详解使用element-ui table组件的筛选功能的一个小坑
2018/11/02 Javascript
详解vantUI框架在vue项目中的应用踩坑
2018/12/06 Javascript
使用异步组件优化Vue应用程序的性能
2019/04/28 Javascript
解决微信小程序云开发中获取数据库的内容为空的方法
2019/05/15 Javascript
Python使用Dijkstra算法实现求解图中最短路径距离问题详解
2018/05/16 Python
Python使用progressbar模块实现的显示进度条功能
2018/05/31 Python
python dataframe NaN处理方式
2019/12/26 Python
PyQt5中多线程模块QThread使用方法的实现
2020/01/31 Python
Python交互环境下打印和输入函数的实例内容
2020/02/16 Python
python GUI库图形界面开发之PyQt5动态(可拖动控件大小)布局控件QSplitter详细使用方法与实例
2020/03/06 Python
Django实现图片上传功能步骤解析
2020/04/22 Python
什么是python的函数体
2020/06/19 Python
你需要学会的8个Python列表技巧
2020/06/24 Python
大唐电信科技股份有限公司java工程师面试经历
2016/12/09 面试题
公司端午节活动方案
2014/02/04 职场文书
扩大国家免疫规划实施方案
2014/03/21 职场文书
汽车广告策划方案
2014/05/31 职场文书
英语专业求职信
2014/07/08 职场文书
企业战略合作意向书
2015/05/08 职场文书
2015秋季运动会通讯稿
2015/07/18 职场文书