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 相关文章推荐
bcastr2.0 通用的图片浏览器
Nov 22 Javascript
JavaScript 学习笔记(六)
Dec 31 Javascript
Jsonp 跨域的原理以及Jquery的解决方案
Jun 27 Javascript
js获取php变量的实现代码
Aug 10 Javascript
多种方式实现JS调用后台方法进行数据交互
Aug 20 Javascript
js实现幻灯片播放图片示例代码
Nov 07 Javascript
基于jQuery1.9版本如何判断浏览器版本类型
Jan 12 Javascript
Bootstrap Paginator分页插件使用方法详解
May 30 Javascript
Bootstrap编写导航栏和登陆框
May 30 Javascript
简单理解Vue条件渲染
Dec 03 Javascript
学习React中ref的两个demo示例
Aug 14 Javascript
VUE递归树形实现多级列表
Jul 15 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
德生PL550的电路分析
2021/03/02 无线电
多重?l件?合查?(一)
2006/10/09 PHP
php自定义函数转换html标签示例
2016/09/29 PHP
thinkphp3.2实现在线留言提交验证码功能
2017/07/19 PHP
javascript中的location用法简单介绍
2007/03/07 Javascript
判断用户是否在线的代码
2011/03/05 Javascript
JavaScript ECMA-262-3 深入解析.第三章.this
2011/09/28 Javascript
js实现点击注册按钮开始读秒倒计时的小例子
2013/05/11 Javascript
Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例
2013/08/28 Javascript
js克隆对象、数组的常用方法介绍
2013/09/26 Javascript
JS Date函数整理方便使用
2013/10/23 Javascript
一个php+js实时显示时间问题
2015/10/12 Javascript
学习JavaScript设计模式(封装)
2015/11/26 Javascript
Angularjs---项目搭建图文教程
2016/07/08 Javascript
js验证真实姓名与身份证号,手机号的简单实例
2016/07/18 Javascript
原生javascript实现的ajax异步封装功能示例
2016/11/03 Javascript
浅析Angular2子模块以及异步加载
2017/04/24 Javascript
神级程序员JavaScript300行代码搞定汉字转拼音
2017/05/20 Javascript
JavaScript之浏览器对象_动力节点Java学院整理
2017/07/03 Javascript
JS简单实现滑动加载数据的方法示例
2017/10/18 Javascript
在react中使用vuex的示例代码
2018/07/30 Javascript
微信小程序:数据存储、传值、取值详解
2019/05/07 Javascript
vue实现pdf文档在线预览功能
2019/11/26 Javascript
[02:49]2014DOTA2电竞也是体育项目! 势要把荣誉带回中国!
2014/07/20 DOTA
Python爬虫库BeautifulSoup的介绍与简单使用实例
2020/01/25 Python
浅谈Pytorch中的自动求导函数backward()所需参数的含义
2020/02/29 Python
Django怎么在admin后台注册数据库表
2020/11/14 Python
python Scrapy爬虫框架的使用
2021/01/21 Python
实例讲解CSS3中的border-radius属性
2015/08/18 HTML / CSS
HTML5各种头部meta标签的功能(推荐)
2017/03/13 HTML / CSS
HTML5离线应用与客户端存储的实现
2018/05/03 HTML / CSS
平面设计师的工作职责
2013/11/21 职场文书
学校食品安全实施方案
2014/06/14 职场文书
仲裁协议书
2014/09/26 职场文书
读书笔记怎么写
2015/07/01 职场文书
MYSQL(电话号码,身份证)数据脱敏的实现
2021/05/28 MySQL