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 相关文章推荐
防止网站内容被拷贝的一些方法与优缺点好处与坏处分析
Nov 30 Javascript
在JS中操作时间之getUTCMilliseconds()方法的使用
Jun 10 Javascript
JAVA四种基本排序方法实例总结
Jul 24 Javascript
js实现兼容性好的微软官网导航下拉菜单效果
Sep 07 Javascript
jquery在ie7下选择器的问题导致append失效的解决方法
Jan 10 Javascript
React学习之事件绑定的几种方法对比
Sep 24 Javascript
探讨Vue.js的组件和模板
Oct 27 Javascript
angularJS自定义directive之带参方法传递详解
Oct 09 Javascript
Vue 实时监听窗口变化 windowresize的两种方法
Nov 06 Javascript
利用angular自动编译andriod APK的绕坑经历分享
Mar 08 Javascript
微信小程序解析富文本过程详解
Jul 13 Javascript
JS数组的常用方法整理
Mar 31 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检测网页是否被百度收录的函数代码
2013/10/09 PHP
laravel安装zend opcache加速器教程
2015/03/02 PHP
jquery 设置元素相对于另一个元素的top值(实例代码)
2013/11/06 Javascript
javascript弹出层输入框(示例代码)
2013/12/11 Javascript
JavaScript中的单引号和双引号报错的解决方法
2014/09/01 Javascript
JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例
2015/03/04 Javascript
jQuery插件简单实现方法
2015/07/18 Javascript
JS使用正则表达式除去字符串中重复字符的方法
2015/11/05 Javascript
快速学习jQuery插件 Cookie插件使用方法
2015/12/01 Javascript
jQuery获取某天的农历日期并判断是否除夕或新年的方法
2016/03/01 Javascript
JavaScript学习笔记之数组求和方法
2016/03/23 Javascript
浅析javaScript中的浅拷贝和深拷贝
2017/02/15 Javascript
让微信小程序支持ES6中Promise特性的方法详解
2017/06/13 Javascript
layer.confirm取消按钮绑定事件的方法
2018/08/17 Javascript
elementUI多选框反选的实现代码
2019/04/03 Javascript
微信小程序调用微信支付接口的实现方法
2019/04/29 Javascript
Nuxt项目支持eslint+pritter+typescript的实现
2019/05/20 Javascript
三分钟教你用Node做一个微信哄女友(基友)神器(面向小白)
2019/06/21 Javascript
JavaScript进阶(三)闭包原理与用法详解
2020/05/09 Javascript
10分钟学会js处理json的常用方法
2020/12/06 Javascript
详细解析Python当中的数据类型和变量
2015/04/25 Python
Python存取XML的常见方法实例分析
2017/03/21 Python
Python之inspect模块实现获取加载模块路径的方法
2018/10/16 Python
python并发和异步编程实例
2018/11/15 Python
pycharm 解除默认unittest模式的方法
2018/11/30 Python
python生成13位或16位时间戳以及反向解析时间戳的实例
2020/03/03 Python
Python如何基于Tesseract实现识别文字功能
2020/06/05 Python
Pytorch 解决自定义子Module .cuda() tensor失败的问题
2020/06/23 Python
一个不错的HTML5 Canvas多层点击事件监听实例
2014/04/29 HTML / CSS
入党思想汇报
2014/01/05 职场文书
无子女夫妻离婚协议书(4篇)
2014/10/20 职场文书
整改报告格式
2014/11/06 职场文书
2014年电工工作总结
2014/11/20 职场文书
综合测评自我评价
2015/03/06 职场文书
人工作失职检讨书
2015/05/05 职场文书
给朋友的赠语
2015/06/23 职场文书