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 解析读取XML文档 实例代码
Jul 07 Javascript
关于javascript DOM事件模型的两件事
Jul 22 Javascript
jQuery validate 中文API 附validate.js中文api手册
Jul 31 Javascript
javascript学习笔记(十七) 检测浏览器插件代码
Jun 20 Javascript
JS获取URL中的参数数据
Dec 05 Javascript
jQuery之DOM对象和jQuery对象的转换与区别分析
Jan 08 Javascript
js实现点击文本框显示日期选择器特效代码分享
May 21 Javascript
详细谈谈javascript的对象
Jul 31 Javascript
jQuery简单创建节点的方法
Sep 09 Javascript
d3.js中冷门却实用的内置函数总结
Feb 04 Javascript
vue数据双向绑定原理解析(get &amp; set)
Mar 08 Javascript
在Vue中使用Select选择器拼接label的操作
Oct 22 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
全国FM电台频率大全 - 15 山东省
2020/03/11 无线电
PHP is_dir() 判断给定文件名是否是一个目录
2010/05/10 PHP
ThinkPHP3.2框架自定义配置和加载用法示例
2018/06/14 PHP
php在linux环境中如何使用redis详解
2020/12/15 PHP
关于javascript event flow 的一个bug详解
2013/09/17 Javascript
Dojo Javascript 编程规范 规范自己的JavaScript书写
2014/10/26 Javascript
Backbone.js 0.9.2 源码注释中文翻译版
2015/06/25 Javascript
谈一谈javascript中继承的多种方式
2016/02/19 Javascript
聊一聊Vue.js过渡效果
2016/09/07 Javascript
JS实现多张图片预览同步上传功能
2017/06/23 Javascript
jQuery ajax读取本地json文件的实例
2017/10/31 jQuery
详解关于Vue版本不匹配问题(Vue packages version mismatch)
2018/09/17 Javascript
jQuery实现上下滚动公告栏详细代码
2018/11/21 jQuery
js实现无限瀑布流实例方法
2019/09/16 Javascript
d3.js实现图形拖拽
2019/12/19 Javascript
[56:38]DOTA2-DPC中国联赛正赛Aster vs Magma BO3 第一场 3月5日
2021/03/11 DOTA
Python 闭包的使用方法
2017/09/07 Python
浅谈dataframe中更改列属性的方法
2018/07/10 Python
python根据url地址下载小文件的实例
2018/12/18 Python
使用python绘制3维正态分布图的方法
2018/12/29 Python
Python图像处理之gif动态图的解析与合成操作详解
2018/12/30 Python
python 基于TCP协议的套接字编程详解
2019/06/29 Python
Python @property原理解析和用法实例
2020/02/11 Python
Python request使用方法及问题总结
2020/04/26 Python
python爬虫多次请求超时的几种重试方法(6种)
2020/12/01 Python
巴黎卡诗加拿大官网:Kérastase加拿大
2018/11/12 全球购物
加拿大品牌鞋包连锁店:Little Burgundy
2021/02/28 全球购物
Ibatis如何调用存储过程
2015/05/15 面试题
大学生物业管理求职信
2013/10/24 职场文书
护理专科毕业推荐信
2013/11/10 职场文书
实习鉴定评语
2014/01/19 职场文书
高一学生期末评语
2014/04/25 职场文书
网络技术专业求职信
2014/05/02 职场文书
2014年租房协议书范本
2014/10/30 职场文书
2014年内部审计工作总结
2014/12/09 职场文书
Go 在 MongoDB 中常用查询与修改的操作
2021/05/07 Golang