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 22 Javascript
JavaScript DOM事件(笔记)
Apr 08 Javascript
解决angular的post请求后SpringMVC后台接收不到参数值问题的方法
Dec 10 Javascript
jquery基础知识第一讲之认识jquery
Mar 17 Javascript
基于jquery实现的银行卡号每隔4位自动插入空格的实现代码
Nov 22 Javascript
解析AngularJS中get请求URL出现的跨域问题
Dec 01 Javascript
浅谈JavaScript find 方法不支持IE的问题
Sep 28 Javascript
Vue.js简易安装和快速入门(第二课)
Oct 17 Javascript
微信小程序实现YDUI的ScrollNav组件
Feb 02 Javascript
vue-auto-focus: 控制自动聚焦行为的 vue 指令方法
Aug 25 Javascript
vue.js 添加 fastclick的支持方法
Aug 28 Javascript
vue在图片上传的时候压缩图片
Nov 18 Vue.js
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
DOTA2 1月28日更新:监管系统降临刀塔世界
2021/01/28 DOTA
php图片上传类 附调用方法
2016/05/15 PHP
laravel学习教程之存取器
2016/07/30 PHP
PHP实现的AES加密、解密封装类与用法示例
2018/08/02 PHP
php tpl模板引擎定义与使用示例
2019/08/09 PHP
PHP的图像处理实例小结【文字水印、图片水印、压缩图像等】
2019/12/20 PHP
Jquery 绑定时间实现代码
2011/05/03 Javascript
jquery选择器之基本过滤选择器详解
2014/01/27 Javascript
jQuery不使用插件及swf实现无刷新文件上传
2014/12/08 Javascript
Jquery中Event对象属性小结
2015/02/27 Javascript
Jquery基础教程之DOM操作
2015/08/19 Javascript
JavaScript必看小技巧(必看)
2016/06/07 Javascript
AngularJs html compiler详解及示例代码
2016/09/01 Javascript
深入掌握 react的 setState的工作机制
2017/09/27 Javascript
Bootstrap table 实现树形表格联动选中联动取消功能
2019/09/30 Javascript
[00:32]DOTA2上海特级锦标赛 COL战队宣传片
2016/03/04 DOTA
在Django的URLconf中使用命名组的方法
2015/07/18 Python
python3+requests接口自动化session操作方法
2018/10/13 Python
PyTorch搭建多项式回归模型(三)
2019/05/22 Python
Python hexstring-list-str之间的转换方法
2019/06/12 Python
python求numpy中array按列非零元素的平均值案例
2020/06/08 Python
突袭HTML5之Javascript API扩展3—本地存储全新体验
2013/01/31 HTML / CSS
日本运动品牌美津浓官方购物网站:MIZUNO SHOP
2016/08/21 全球购物
什么是Rollback Segment
2013/04/22 面试题
给分销商的致歉信
2014/01/14 职场文书
彩色的非洲教学反思
2014/02/18 职场文书
有创意的广告词
2014/03/18 职场文书
小区推广策划方案
2014/06/06 职场文书
领导班子对照检查剖析材料
2014/10/13 职场文书
离婚协议书怎么写的
2014/12/14 职场文书
财务负责人岗位职责
2015/02/03 职场文书
英文慰问信
2015/02/14 职场文书
2015年助理政工师工作总结
2015/05/26 职场文书
毕业论文答辩开场白和结束语
2015/05/27 职场文书
MySQL 视图(View)原理解析
2021/05/19 MySQL
浅谈Redis中的RDB快照
2021/06/29 Redis