jQuery+ajax中getJSON() 用法实例_jquery

实例
从 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);
});

时间: 2024-11-03 21:47:34

jQuery+ajax中getJSON() 用法实例_jquery的相关文章

jQuery中$.extend()用法实例_jquery

本文实例讲述了jQuery中$.extend()用法.分享给大家供大家参考.具体分析如下: $.extend()方法定义如下: jQuery.extend([deep], target, object1, [objectN]) 用一个或多个其他对象来扩展一个对象,返回被扩展的对象. 如果不指定target,则给jQuery命名空间本身进行扩展.这有助于插件作者为jQuery增加新方法. 如果第一个参数设置为true,则jQuery返回一个深层次的副本,递归地复制找到的任何对象.否则的话,副本会与

jquery遍历函数siblings()用法实例_jquery

本文实例讲述了jquery遍历函数siblings()用法.分享给大家供大家参考,具体如下: siblings([expr]) 得到所有匹配元素集合中各个元素的所有兄弟元素集合.返回匹配元素集合 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> &l

jquery事件preventDefault()方法用法实例_jquery

本文实例讲述了jquery事件preventDefault()方法用法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>jquery事件:preventDefault()方法的使用</title> <script type="text/javascript" src="jquery-1.8.2.min.js"></script> <

jQuery的css()方法用法实例_jquery

本文实例讲述了jQuery的css()方法用法.分享给大家供大家参考.具体分析如下: 此方法返回或设置匹配元素的一个或多个样式属性. 语法结构: 语法一: 取得指定样式属性的属性值.以样式属性名称作为参数.例如: 复制代码 代码如下: $("div").css("color") 以上代码能够获取div的字体颜色值. 代码实例: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta ch

jQuery的one()方法用法实例_jquery

本文实例讲述了jQuery的one()方法用法.分享给大家供大家参考.具体分析如下: 为匹配元素的特定事件绑定一个一次性的事件处理方法. 在语法上one()方法和bind()方法是一样的,它们的不同在于绑定的处理方法的执行次数. 语法结构: 复制代码 代码如下: $(selector).one(event,data,function) 参数列表: 参数 描述 type 定义绑定到匹配元素中的事件类型. 如果有多个事件使用空格分隔. data 可选.传递给事件对象的额外数据对象. function

jQuery的context属性用法实例_jquery

本文实例讲述了jQuery的context属性用法.分享给大家供大家参考.具体分析如下: 此属性可以返回传给jQuery()的原始DOM节点内容,即jQuery()方法的第二个参数值.如果jQuery()方法没有指定此参数,那么context指向当前文档(document).语法结构: 复制代码 代码如下: $("selector").context 实例代码: 实例一: 复制代码 代码如下: <!DOCTYPE html> <html> <head>

jQuery div拖拽用法实例_jquery

本文实例讲述了jQuery div拖拽用法.分享给大家供大家参考,具体如下: 这里需要引用好jquery 和 jqueryui两个包: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus"> <meta na

jQuery ajax调用WCF服务实例_jquery

恩,在由瘦客户端转换成胖浏览器端的"潮流"下,必然要使用JavaScript调用后台的各种服务. 屌丝所维护的产品通信都是使用的WCF服务,因此必然要学习这样的内容.借用jQuery强大的库,使用JavaScript访问WCF服务非常简便.同事研究了一个breeze库,那么屌丝就来试验一下ajax.这里把实现简单地记录以便马克一下,以后忘了就看这篇日志来作弊. 一.更改WCF服务的配置 默认情况下,WCF服务是不允许使用HTTP请求来访问的.我们需要将WCF服务的配置文件(注意如果有其

jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法分析_jquery

本文实例讲述了jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="h