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)

可选。规定当请求成功时运行的函数。

额外的参数:

  • response - 包含来自请求的结果数据
  • status - 包含请求的状态
  • xhr - 包含 XMLHttpRequest 对象

  $.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使用的更多相关文章

  1. jQuery ajax - get(),getJSON(),post()方法

    1)       jQuery ajax - get() 方法: $(selector).get(url,data,success(response,status,xhr),dataType) 参数 ...

  2. Jquery Ajax和getJSON获取后台普通Json数据和层级Json数据解析

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. jQuery中$.ajax()和$.getJson()同步处理详解

    一.前言 为什么需要用到同步,因为有时候我们给一个提交按钮注册提交表单数据的时候,在提交动作之前会进行一系列的异步ajax请求操作,但是页面js代码会按顺序从上往下面执行,如果你在这过程中进行了异步操 ...

  4. jQuery ajax - getScript() 方法和getJSON方法

    实例 使用 AJAX 请求来获得 JSON 数据,并输出结果: $("button").click(function(){ $.getJSON("demo_ajax_js ...

  5. [ 转 ]jquery的ajax和getJson跨域获取json数据

    目前浏览器端跨域访问常用的两种方法有两种: 1.通过jQuery的ajax进行跨域,这其实是采用的jsonp的方式来实现的. jsonp是英文json with padding的缩写.它允许在服务器端 ...

  6. jQuery中的$.getJSON、$.ajax、$.get、$.post的区别

    jQuery中的$.getJSON.$.ajax.$.get.$.post的区别 使用见Flask(python)异步(ajax)返回json格式数据 ①.$.getJSON $.getJSON()是 ...

  7. jQuery ajax - getJSON() 用法实例

    实例 从 test.js 载入 JSON 数据并显示 JSON 数据中一个 name 字段数据: $.getJSON("test.js", function(json){ aler ...

  8. jQuery的Ajax操作小结——$.ajax和$.getJSON等用法小结

    一.$.ajax用法与举例 jQuery.ajax(url,[settings])     ——返回值:XMLHttpRequest 通过 HTTP 请求加载远程数据,这个是jQuery 的底层 AJ ...

  9. jquery的ajax和getJson跨域获取json数据

    目前浏览器端跨域访问常用的两种方法有两种: 1.通过jQuery的ajax进行跨域,这其实是采用的jsonp的方式来实现的. jsonp是英文json with padding的缩写.它允许在服务器端 ...

随机推荐

  1. Smarty的循环

    (1)section.sectionelse功能多,参数多.或许不是太实用.是smarty用来做循环操作的函数之一.(2)了解基本属性name和loop <section name=articl ...

  2. windows server2012安装jdk时报错误代码1603

    解决方法:在控制面板中将其卸载,把jdk8换成jdk7就可以安装上了

  3. [GO]匿名字段

    package main import ( "fmt" ) type Person struct { name string sex byte age int } type Stu ...

  4. CodeForces 682A Alyona and Numbers (水题,数学)

    题意:给定两个数 m,n,问你在从1到 n,和从 1到 m中任选两个数加起来是5的倍数,问你有多少个. 析:先计算 m 和 n中有多少个取模5是从0到4的,然后根据排列组合,相乘就得到了小于等于 m ...

  5. 编写高质量代码改善C#程序的157个建议——建议112:将现实世界中的对象抽象为类,将可复用对象圈起来就是命名空间

    建议112:将现实世界中的对象抽象为类,将可复用对象圈起来就是命名空间 在我们身边的世界中,对象是什么?对象就是事物,俗称“东西”.那么,什么东西算得上是一个对象呢?对象有属性.有行为.以动物为例,比 ...

  6. 编写高质量代码改善C#程序的157个建议——建议95:避免在构造方法中调用虚成员

    建议95:避免在构造方法中调用虚成员 在构造方法中调用虚方法会带来一些意想不到的错误,虽然这种方法不常见,但还是需要注意这类陷阱. static void Main() { American amer ...

  7. 11、Semantic-UI之分割线

    11.1 分割线的定义 示例:定义分割线 分割线 <div class="ui divider"></div> 竖线并加入or <div class= ...

  8. html中怎么样让div并排显示

    html中的div默认是流式显示,每个div会占用一整行 <html> <head> <meta http-equiv="Content-Type" ...

  9. nowcoder(牛客网)OI测试赛3 解题报告

    昨天因为胡搞了一会儿社团的事情,所以错过(逃过)了nowcoder的测试赛..... 以上,听说还是普及组难度qwq,而且还有很多大佬AK(然而我这么蒻肯定还是觉得有点难度的吧qwq) 不过我还是日常 ...

  10. 苹果软件App上架问题

    0.官方网站 开发者中心 itunes connect 优酷 哔哩哔哩 腾讯视频 1.上架流程 1.1 开发者账号申请 2017年苹果企业开发者账请完号申整指南 iOS开发之苹果开发者账号注册申请流程 ...