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的缩写.它允许在服务器端 ...
随机推荐
- Smarty的循环
(1)section.sectionelse功能多,参数多.或许不是太实用.是smarty用来做循环操作的函数之一.(2)了解基本属性name和loop <section name=articl ...
- windows server2012安装jdk时报错误代码1603
解决方法:在控制面板中将其卸载,把jdk8换成jdk7就可以安装上了
- [GO]匿名字段
package main import ( "fmt" ) type Person struct { name string sex byte age int } type Stu ...
- CodeForces 682A Alyona and Numbers (水题,数学)
题意:给定两个数 m,n,问你在从1到 n,和从 1到 m中任选两个数加起来是5的倍数,问你有多少个. 析:先计算 m 和 n中有多少个取模5是从0到4的,然后根据排列组合,相乘就得到了小于等于 m ...
- 编写高质量代码改善C#程序的157个建议——建议112:将现实世界中的对象抽象为类,将可复用对象圈起来就是命名空间
建议112:将现实世界中的对象抽象为类,将可复用对象圈起来就是命名空间 在我们身边的世界中,对象是什么?对象就是事物,俗称“东西”.那么,什么东西算得上是一个对象呢?对象有属性.有行为.以动物为例,比 ...
- 编写高质量代码改善C#程序的157个建议——建议95:避免在构造方法中调用虚成员
建议95:避免在构造方法中调用虚成员 在构造方法中调用虚方法会带来一些意想不到的错误,虽然这种方法不常见,但还是需要注意这类陷阱. static void Main() { American amer ...
- 11、Semantic-UI之分割线
11.1 分割线的定义 示例:定义分割线 分割线 <div class="ui divider"></div> 竖线并加入or <div class= ...
- html中怎么样让div并排显示
html中的div默认是流式显示,每个div会占用一整行 <html> <head> <meta http-equiv="Content-Type" ...
- nowcoder(牛客网)OI测试赛3 解题报告
昨天因为胡搞了一会儿社团的事情,所以错过(逃过)了nowcoder的测试赛..... 以上,听说还是普及组难度qwq,而且还有很多大佬AK(然而我这么蒻肯定还是觉得有点难度的吧qwq) 不过我还是日常 ...
- 苹果软件App上架问题
0.官方网站 开发者中心 itunes connect 优酷 哔哩哔哩 腾讯视频 1.上架流程 1.1 开发者账号申请 2017年苹果企业开发者账请完号申整指南 iOS开发之苹果开发者账号注册申请流程 ...