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 弹出层实现代码
Oct 30 Javascript
自制轻量级仿jQuery.boxy对话框插件代码
Oct 26 Javascript
JavaScript中的onerror事件概述及使用
Apr 01 Javascript
js为数字添加逗号并格式化数字的代码
Aug 23 Javascript
JS和Jquery获取和修改label的值的示例代码
Jan 15 Javascript
jQuery判断元素上是否绑定了指定事件的方法
Mar 17 Javascript
jQuery实现仿Alipay支付宝首页全屏焦点图切换特效
May 04 Javascript
jQuery ajax应用总结
Jun 02 Javascript
JavaScript模板引擎应用场景及实现原理详解
Dec 14 Javascript
jQuery弹框插件使用方法详解
May 26 jQuery
vue项目里面引用svg文件并给svg里面的元素赋值
Aug 17 Javascript
解决Antd Table表头加Icon和气泡提示的坑
Nov 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获取金书网的书名的实现代码
2010/06/11 PHP
PHP中英混合字符串截取函数代码
2011/07/17 PHP
php取整函数ceil,floo,round的用法及介绍
2013/08/31 PHP
php旋转图片90度的方法
2013/11/07 PHP
php生成随机字符串可指定纯数字、纯字母或者混合的
2014/04/18 PHP
php 伪静态之IIS篇
2014/06/02 PHP
PHP异常处理浅析
2015/05/12 PHP
基于命令行执行带参数的php脚本并取得参数的方法
2016/01/25 PHP
jQuery的缓存机制浅析
2014/06/07 Javascript
JS基于面向对象实现的拖拽库实例
2015/09/24 Javascript
JS设置下拉列表框当前所选值的方法
2015/12/22 Javascript
JS拖拽组件学习使用
2016/01/19 Javascript
微信小程序 定义全局数据、函数复用、模版等详细介绍
2016/10/27 Javascript
vue快捷键与基础指令详解
2017/06/01 Javascript
vue+vux实现移动端文件上传样式
2017/07/28 Javascript
浅谈JavaScript 代码简洁之道
2019/01/09 Javascript
JavaScript 判断iPhone X Series机型的方法
2019/01/28 Javascript
详解基于Vue/React项目的移动端适配方案
2019/08/23 Javascript
layui之table checkbox初始化时选中对应选项的方法
2019/09/02 Javascript
[16:04]DOTA2海涛带你玩炸弹 9月5日更新内容详解
2014/09/05 DOTA
python使用in操作符时元组和数组的区别分析
2015/05/19 Python
Django实现全文检索的方法(支持中文)
2018/05/14 Python
详解Python中的分组函数groupby和itertools)
2018/07/11 Python
浅谈pytorch和Numpy的区别以及相互转换方法
2018/07/26 Python
Python 自动登录淘宝并保存登录信息的方法
2019/09/04 Python
Python3.7在anaconda里面使用IDLE编译器的步骤详解
2020/04/29 Python
python多进程使用函数封装实例
2020/05/02 Python
纽约通行卡:The New York Pass(免费游览纽约90多个景点)
2017/07/29 全球购物
三星英国官网:Samsung英国
2018/09/25 全球购物
台湾屈臣氏网路商店:Watsons台湾
2020/12/29 全球购物
专业求职信撰写要诀
2014/02/18 职场文书
陈胜吴广起义口号
2014/06/20 职场文书
民主生活会对照检查材料(统计局)
2014/09/21 职场文书
入党积极分子半年考察意见
2015/06/02 职场文书
手术室消毒隔离制度
2015/08/05 职场文书
详解CSS3.0(Cascading Style Sheet) 层叠级联样式表
2021/07/16 HTML / CSS