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 相关文章推荐
[IE&amp;FireFox兼容]JS对select操作
Jan 07 Javascript
javascript 学习之旅 (3)
Feb 05 Javascript
jQuery 注意事项 与原因分析
Apr 24 Javascript
jQuery入门知识简介
Mar 04 Javascript
javascript中return,return true,return false三者的用法及区别
Nov 17 Javascript
第五章之BootStrap 栅格系统
Apr 25 Javascript
AngularJS入门教程之模块化操作用法示例
Nov 02 Javascript
在DWR中实现直接获取一个JAVA类的返回值的两种方法
Dec 25 Javascript
JavaScript字符集编码与解码详谈
Feb 02 Javascript
ES6学习笔记之map、set与数组、对象的对比
Mar 01 Javascript
Vue拖拽组件列表实现动态页面配置功能
Jun 17 Javascript
javascript实现倒计时效果
Feb 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实现下载生成某链接快捷方式的解决方法
2013/05/07 PHP
php var_export与var_dump 输出的不同
2013/08/09 PHP
强制PHP命令行脚本单进程运行的方法
2014/04/15 PHP
PHP、Nginx、Apache中禁止网页被iframe引用的方法
2020/10/01 PHP
laravel 5.4 + vue + vux + element的环境搭配过程介绍
2018/04/26 PHP
tp5框架使用composer实现日志记录功能示例
2019/01/10 PHP
Thinkphp5.0 框架的请求方式与响应方式分析
2019/10/14 PHP
laravel model模型定义实现开启自动管理时间created_at,updated_at
2019/10/17 PHP
Extjs实现进度条的两种便捷方式
2013/09/26 Javascript
ParseInt函数参数设置介绍
2014/01/02 Javascript
JS清除选择内容的方法
2015/01/29 Javascript
Bootstrap表单布局样式代码
2016/05/31 Javascript
使用 Vue.js 仿百度搜索框的实例代码
2017/05/09 Javascript
AngularJS实现表格的增删改查(仅限前端)
2017/07/04 Javascript
详解react native页面间传递数据的几种方式
2018/11/07 Javascript
vue+element-ui表格封装tag标签使用插槽
2020/06/18 Javascript
JS实现canvas简单小画板功能
2020/06/23 Javascript
javascript实现前端成语点击验证优化
2020/06/24 Javascript
JavaScript获取时区实现过程解析
2020/09/24 Javascript
带你使用webpack快速构建web项目的方法
2020/11/12 Javascript
[01:29:42]Liquid vs VP Supermajor决赛 BO 第一场 6.10
2018/07/05 DOTA
Python pass 语句使用示例
2014/03/11 Python
python交互式图形编程实例(三)
2017/11/17 Python
python环境路径配置以及命令行运行脚本
2019/04/02 Python
python操作kafka实践的示例代码
2019/06/19 Python
python3 mmh3安装及使用方法
2019/10/09 Python
python温度转换华氏温度实现代码
2020/12/06 Python
详解Python openpyxl库的基本应用
2021/02/26 Python
职高毕业生自我鉴定
2013/10/21 职场文书
毕业生自荐书
2014/02/02 职场文书
水利公司纪检监察自我鉴定
2014/02/25 职场文书
公司活动总结范文
2014/07/01 职场文书
考研英语辞职信
2015/05/13 职场文书
管辖权异议上诉状
2015/05/23 职场文书
应届生们该怎么书写求职信?
2019/07/05 职场文书
Log4j.properties配置及其使用
2021/08/02 Java/Android