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 相关文章推荐
JQuery for与each性能比较分析
May 14 Javascript
JS实现根据当前文字选择返回被选中的文字
May 21 Javascript
jQuery中delegate()方法用法实例
Jan 19 Javascript
js基于setTimeout与setInterval实现多线程
Jun 17 Javascript
jQuery实现表格行和列的动态添加与删除方法【测试可用】
Aug 01 Javascript
Angular2 Service实现简单音乐播放器服务
Feb 24 Javascript
利用node.js制作命令行工具方法教程(一)
Jun 22 Javascript
通过JS深度判断两个对象字段相同
Jun 14 Javascript
vue的滚动条插件实现代码
Sep 07 Javascript
vscode中eslint插件的配置(prettier配置无效)
Sep 10 Javascript
vue 根据选择条件显示指定参数的例子
Nov 09 Javascript
Vue element-ui父组件控制子组件的表单校验操作
Jul 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学习之PHP变量
2006/10/09 PHP
php格式化工具Beautify PHP小小BUG
2008/04/24 PHP
PHP 一个随机字符串生成代码
2010/05/26 PHP
PHP 5.3.1 安装包 VC9 VC6不同版本的区别是什么
2010/07/04 PHP
Yii框架调试心得--在页面输出执行sql语句
2014/12/25 PHP
php正则匹配html中带class的div并选取其中内容的方法
2015/01/13 PHP
php记录搜索引擎爬行记录的实现代码
2018/03/02 PHP
jQuery Ajax之load()方法
2009/10/12 Javascript
基于jQuery和CSS3制作响应式水平时间轴附源码下载
2015/12/20 Javascript
使用JS动态显示文本
2017/09/09 Javascript
详解VUE自定义组件中用.sync修饰符与v-model的区别
2018/06/26 Javascript
ES6中Set和Map用法实例详解
2020/03/02 Javascript
原生js+canvas实现贪吃蛇效果
2020/08/02 Javascript
JavaScript 几种循环方式以及模块化的总结
2020/09/03 Javascript
Vue项目打包编译优化方案
2020/09/16 Javascript
[01:10:57]Liquid vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python类的基础入门知识
2008/11/24 Python
python标准算法实现数组全排列的方法
2015/03/17 Python
python opencv之SIFT算法示例
2018/02/24 Python
python查看列的唯一值方法
2018/07/17 Python
使用Python做定时任务及时了解互联网动态
2019/05/15 Python
详解numpy的argmax的具体使用
2019/05/27 Python
python实现人工智能Ai抠图功能
2019/09/05 Python
python  ceiling divide 除法向上取整(或小数向上取整)的实例
2019/12/27 Python
Python定义函数实现累计求和操作
2020/05/03 Python
使用CSS Grid布局实现网格的流动
2014/12/30 HTML / CSS
意大利巧克力店:Chocolate Shop
2019/07/24 全球购物
CAT鞋加拿大官网:CAT Footwear加拿大
2020/08/05 全球购物
人力资源部岗位职责
2015/02/11 职场文书
毕业生就业推荐表自我评价
2015/03/02 职场文书
防卫过当辩护词
2015/05/21 职场文书
新娘父亲婚礼致辞
2015/07/27 职场文书
postman中form-data、x-www-form-urlencoded、raw、binary的区别介绍
2022/01/18 HTML / CSS
详细聊一聊mysql的树形结构存储以及查询
2022/04/05 MySQL
Consul在linux环境的集群部署
2022/04/08 Servers
解决 Redis 秒杀超卖场景的高并发
2022/04/12 Redis