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 相关文章推荐
悄悄用脚本检查你访问过哪些网站的代码
Dec 04 Javascript
Javascript引用指针使用介绍
Nov 07 Javascript
多个表单中如何获得这个文件上传的网址实现js代码
Mar 25 Javascript
jquery实现带复选框的表格行选中删除时高亮显示
Aug 01 Javascript
原生JS封装Ajax插件(同域、jsonp跨域)
May 03 Javascript
JS实现图片点击后出现模态框效果
May 03 Javascript
[js高手之路]HTML标签解释成DOM节点的实现方法
Aug 31 Javascript
JS关于刷新页面的相关总结
May 09 Javascript
node.js连接mysql与基本用法示例
Jan 05 Javascript
jquery实现动态改变css样式的方法分析
May 27 jQuery
three.js利用卷积法如何实现物体描边效果
Nov 27 Javascript
javascript设计模式 ? 工厂模式原理与应用实例分析
Apr 09 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
C# Assembly类访问程序集信息
2009/06/13 PHP
PHP使用CURL实现对带有验证码的网站进行模拟登录的方法
2014/07/23 PHP
PHP数组操作类实例
2015/07/11 PHP
PHP压缩图片功能的介绍
2019/03/21 PHP
PHP实现二维数组按照指定的字段进行排序算法示例
2019/04/23 PHP
分享别人写的一个小型js框架
2007/08/13 Javascript
javascript window.opener的用法分析
2010/04/07 Javascript
关于div自适应高度/左右高度自适应一致的js代码
2013/03/22 Javascript
jQuery的基本概念与高级编程
2015/05/14 Javascript
javascript字符串循环匹配实例分析
2015/07/17 Javascript
JavaScript实现文字跟随鼠标特效
2015/08/06 Javascript
JavaScript实现自动生成网页元素功能(按钮、文本等)
2015/11/21 Javascript
轻松学习jQuery插件EasyUI EasyUI实现树形网络基本操作(2)
2015/11/30 Javascript
javascript创建对象、对象继承的实用方式详解
2016/03/08 Javascript
基于javascript编写简单日历
2016/05/02 Javascript
JS组件系列之Bootstrap table表格组件神器【终结篇】
2016/05/10 Javascript
从零学习node.js之模块规范(一)
2017/02/21 Javascript
微信小程序 实例开发总结
2017/04/26 Javascript
深入理解vue.js中$watch的oldvalue与newValue
2017/08/07 Javascript
利用Javascript实现一套自定义事件机制
2017/12/14 Javascript
jQuery中复合选择器简单用法示例
2018/03/31 jQuery
解决angular双向绑定无效果,ng-model不能正常显示的问题
2018/10/02 Javascript
单页面vue引入百度统计的使用方法示例详解
2018/10/13 Javascript
Vue分页器实现原理详解
2019/06/28 Javascript
微信小程序地图绘制线段并且测量(实例代码)
2020/01/02 Javascript
JavaScript数组类型Array相关的属性与方法详解
2020/09/08 Javascript
Python实例一个类背后发生了什么
2016/02/09 Python
django页面跳转问题及注意事项
2019/07/18 Python
详解用Python爬虫获取百度企业信用中企业基本信息
2020/07/02 Python
HTML5 video视频字幕的使用和制作方法
2018/05/03 HTML / CSS
英国和世界各地预订便宜的酒店:LateRooms.com
2019/05/05 全球购物
mysql_pconnect()和mysql_connect()有什么区别
2012/05/25 面试题
机电专业个人求职信范文
2013/12/30 职场文书
超搞笑婚前保证书
2015/05/08 职场文书
护士爱岗敬业心得体会
2016/01/25 职场文书
python缺失值的解决方法总结
2021/06/09 Python