jquery ajax的getJSON使用
getJSON的定义和用法
通过 HTTP GET 请求载入 JSON 数据。
在 jQuery 1.2 中,您可以通过使用 JSONP 形式的回调函数来加载其他网域的 JSON 数据,如 "myurl?callback=?"。jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。 注意:此行以后的代码将在这个回调函数执行前执行。
语法
jQuery.getJSON(url,data,success(data,status,xhr))
参数 | 描述 |
---|---|
url | 必需。规定将请求发送的哪个 URL。 |
data | 可选。规定连同请求发送到服务器的数据。 |
success(data,status,xhr) |
可选。规定当请求成功时运行的函数。 额外的参数:
|
$.getJSON的回调函数为:success(data,status,xhr)
回调函数可以接受三个参数,第一个书返回的JSON数据:JSON--data,第二个是状态--status,第三个是jQuery的XMLHttpRequest--xhr。
返回数据后可以用$.each()在回调函数中解析JSON数据
jQuery.each( collection, callback(indexInArray, valueOfElement) )
$.each()方法接受两个参数,第一个是需要遍历的对象集合(JSON对象集合--collection),第二个是用来遍历的方法--callback,这个方法又接受两个参数,第一个是遍历的index,第二个是当前遍历的值--JSON数据集合的item。
详细说明
$.getJSON函数是简写的 Ajax 函数,等价于:
$.ajax({
url: url,
data: data,
success: callback,
dataType: json
});
发送到服务器的数据可作为查询字符串附加到 URL 之后。如果 data 参数的值是对象(映射),那么在附加到 URL 之前将转换为字符串,并进行 URL 编码。
传递给 callback 的返回数据,可以是 JavaScript 对象,或以 JSON 结构定义的数组,并使用 $.parseJSON() 方法进行解析。
示例1
从 test.js 载入 JSON 数据并显示 JSON 数据中一个 name 字段数据:
$.getJSON
("test.js", function(json){
alert("JSON Data: " + json.users[3].name);
});
示例2
//<table id="content"><thead /><tbody></tbody></table>
$.getJSON("url or json", function(data) {
$.each(data.rows, function(i, item) {
$("#content tbody").append(
"<tr><td>" + item.id+ "</td>" +
"<td>" + item.name + "</td>" +
"<td>" + item.value + "</td></tr>");
});
});
注意:上面$.each函数中的对象集合data.rows,要对应JSON格式{"rows":[{},{},{}]},如果JSON中没有"rows标记",调用$.each函数是对象集合只需data就可以,不必再加rows
参考:http://www.w3school.com.cn/jquery/ajax_getjson.asp
http://www.cnblogs.com/codeplus/archive/2011/07/18/2109544.html
jquery ajax的getJSON使用的更多相关文章
- jQuery ajax - get(),getJSON(),post()方法
1) jQuery ajax - get() 方法: $(selector).get(url,data,success(response,status,xhr),dataType) 参数 ...
- Jquery Ajax和getJSON获取后台普通Json数据和层级Json数据解析
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery中$.ajax()和$.getJson()同步处理详解
一.前言 为什么需要用到同步,因为有时候我们给一个提交按钮注册提交表单数据的时候,在提交动作之前会进行一系列的异步ajax请求操作,但是页面js代码会按顺序从上往下面执行,如果你在这过程中进行了异步操 ...
- jQuery ajax - getScript() 方法和getJSON方法
实例 使用 AJAX 请求来获得 JSON 数据,并输出结果: $("button").click(function(){ $.getJSON("demo_ajax_js ...
- [ 转 ]jquery的ajax和getJson跨域获取json数据
目前浏览器端跨域访问常用的两种方法有两种: 1.通过jQuery的ajax进行跨域,这其实是采用的jsonp的方式来实现的. jsonp是英文json with padding的缩写.它允许在服务器端 ...
- jQuery中的$.getJSON、$.ajax、$.get、$.post的区别
jQuery中的$.getJSON.$.ajax.$.get.$.post的区别 使用见Flask(python)异步(ajax)返回json格式数据 ①.$.getJSON $.getJSON()是 ...
- jQuery ajax - getJSON() 用法实例
实例 从 test.js 载入 JSON 数据并显示 JSON 数据中一个 name 字段数据: $.getJSON("test.js", function(json){ aler ...
- jQuery的Ajax操作小结——$.ajax和$.getJSON等用法小结
一.$.ajax用法与举例 jQuery.ajax(url,[settings]) ——返回值:XMLHttpRequest 通过 HTTP 请求加载远程数据,这个是jQuery 的底层 AJ ...
- jquery的ajax和getJson跨域获取json数据
目前浏览器端跨域访问常用的两种方法有两种: 1.通过jQuery的ajax进行跨域,这其实是采用的jsonp的方式来实现的. jsonp是英文json with padding的缩写.它允许在服务器端 ...
随机推荐
- linux 删除文件,某个文件例外
# shopt -s extglob (打开extglob模式) # rm -fr !(file1)
- ubuntu 13.04编译安装xen4.4总结
之前在ubuntu14.04上安装xen4.4失败,提示编译有问题,这次换了成了ubuntu13.04进行安装,成功完成xen4.4的安装 1. 安装环境 操作系统:ubuntu13.04 xen版本 ...
- 编写高质量代码改善C#程序的157个建议——建议78:应避免线程数量过多
建议78:应避免线程数量过多 在多数情况下,创建过多的线程意味着应用程序的架构设计可能存在着缺陷.经常有人会问,一个应用程序中到底含有多少线程才是合理的.现在我们找一台PC机,打开Windows的任务 ...
- mysql 数据库查询
myspl 三部分 文件 服务 界面 查看数据库命令 show databases 创建数据库 create database 库名 删除数据库 drop database ...
- Win10 安装配置Android sdk及adb环境变量
今天在新买的win10系统笔记本上安装配置adb,开始觉得挺简单的事,公司win7电脑上有现成的,但实际过程中……没想的那么简单了!好了,废话少说,直接正题. 研究了好一会下,总算搞定,总结如下: 1 ...
- 使用shell脚本build并创建ipa文件(转)
前言 由于项目引入了敏捷开发,需要每天build出一个ipa供QA测试.此前是使用Xcode先achive出一个文件,再在 organizer->achives里发布ipa,一直感觉也没啥不方便 ...
- Linq基础必备
1.linq基础必备之对象初始化器和匿名类型因果分析 3. 一:对象初始化器 1.就是在new的时候给公共属性赋值的一种方式 2. 在没有初始化器之前的时候,我们是怎么初始化的呢??? 1. 构造 ...
- 等等,你可能误解nodejs了–通俗的概括nodejs的真相
最近刚把产品从cpp平台迁移到nodejs平台了. 很多以前关于nodejs的观念被颠覆了. 这里分享出来, 欢迎大家批评指正. "nodejs是做服务器端开发的, 它一定和web相关,几 ...
- Spring Boot专题背景简介
鄙人13年毕业,不曾在圈子里写过总结,因此文笔颇不自信. 但人生永远没有太晚的开始,现在开始做些笔记,借此巩固下学到的新知识. 一些题外话: 前段时间,做个小项目,由于某些原因,使用Java来写(之前 ...
- C#多线程学习(五) 多线程的自动管理(定时器)
Timer类:设置一个定时器,定时执行用户指定的函数. 定时器启动后,系统将自动建立一个新的线程,执行用户指定的函数. 初始化一个Timer对象: Timer timer ...