$.get()方法使用GET方式来进行异步请求,它的语法结构为:
$.get( url [, data] [, callback] )
解释一下这个函数的各个参数:
url:string类型,ajax请求的地址。
data:可选参数,object类型,发送至服务器的key/value数据会作为QueryString附加到请求URL中。
callback:可选参数,function类型,当ajax返回成功时自动调用该函数。
最后写一个$.get()的实例供大家参考:
$.get("submit.php",{id:'123',name:'小王',},function(data,state){
//这里显示从服务器返回的数据
alert(data);
//这里显示返回的状态
if(state == 'ok'){
alert("返回数据成功");
}else{
alert("返回数据失败");
}
});
$.post()方法使用POST方式来进行异步请求,它的语法结构为:
$.post(url,[data],[callback],[type])
这个方法和 . g e t ( ) 用 法 差 不 多 , 唯 独 多 了 一 个 t y p e 参 数 , 那 么 这 里 就 只 介 绍 t y p e 参 数 吧 , 其 他 的 参 考 上 面 .get()用法差不多,唯独多了一个type参数,那么这里就只介绍type参数吧,其他的参考上面 .get()用法差不多,唯独多了一个type参数,那么这里就只介绍type参数吧,其他的参考上面.get()的。
type:type为请求的数据类型,可以是html,xml,json等类型,如果我们设置这个参数为:json,那么返回的格式则是json格式的,如果没有设置,就和$.get()返回的格式一样,都是字符串的。
最后写一个$.post()的实例供大家参考:
$.post("submit.php",{id:'123',name:'小明',},
function(data,state){
//这里显示从服务器返回的数据
alert(data);
//这里显示返回的状态
if(state == 'ok'){
alert("返回数据成功");
}else{
alert("返回数据失败");
},"json");
$.getJSON()是专门为ajax获取json数据而设置的,并且支持"跨域"调用,其语法的格式为:
getJSON(url,[data],[callback])
url:string类型, 发送请求地址
data :可选参数, 待发送 Key/value 参数 ,同get,post类型的data
callback :可选参数,载入成功时回调函数,同get,post类型的callback
JSON是一种理想的数据传输格式,它能够很好的融合与JavaScript或其他宿主语言,并且可以被JS直接使用。使用JSON相比传统的通过 GET、POST直接发送“裸体”数据,在结构上更为合理,也更为安全。至于jQuery的getJSON()函数,只是设置了JSON参数的ajax()函数的一个简化版本。这个函数也是可以跨域使用的,相比get()、post()有一定优势。另外这个函数可以通过把请求url写 成"myurl?callback=X"这种格式,让程序执行回调函数X。
提示:数据最终还是通过url后面通过get方式发送数据出去的,这就决定了,发送的data数据量不能太多,否则造成url太长接收失败(getJSON方式是不可能有post方式递交的)。
$.ajax()是jquery中通用的一个ajax封装,其语法的格式为:
$.ajax(options)
其中options是一个object类型,它指明了本次ajax调用的具体参数,这里我把最常用的几个参数附上
$.ajax({
url: 'submit.aspx',
datatype: "json",
type: 'post',
success: function (e) {
//成功后回调
alert("回调函数成功了");
},
error: function(e){
//失败后回调
alert("服务器请求失败");
},
beforeSend: function(){
//发送请求前调用,可以放一些"正在加载"之类额话
alert("正在加载");
}})
jQuery.getJSON()函数用于通过HTTP
GET形式的AJAX请求获取远程JSON编码的数据。
JSON是一种数据格式,JS原生支持JSON格式,通过jQuery.getJSON()从服务器获得的JSON数据,jQuery会先尝试将其转为对应的JS对象。
如果请求的URL中包括"callback=?"等类似的部分,jQuery会自动将其视作JSONP,并执行对应的回调函数来获取JSON数据。
重要注意
:服务器返回的JSON数据必须符合严格的JSON语法,例如:所有属性名称必须加双引号,所有字符串值也必须加双引号(而不是单引号)。
请注意,该函数是通过异步方式加载数据的。
该函数属于全局jQuery
对象。
语法
jQuery 1.0 新增该静态函数。
jQuery.getJSON( url [, data ] [, success ] )
参数
参数 | 描述 |
---|---|
url | String类型指定请求的目标URL。 |
data | 可选/String/Object类型发送请求传递的数据。 |
success | 可选/Function类型请求成功时执行的回调函数。它有3个参数:其一是请求返回的数据,其二是请求状态文本(例如"success"、 “notmodified”),其三是当前jqXHR对象(jQuery 1.4及之前版本,该参数为原生的XMLHttpRequest对象)。 |
参数success
指定的回调函数只有在请求成功时才会执行,如果请求失败(例如找不到页面、服务器错误等)则不作任何处理。
返回值
jQuery.getJSON()
函数的返回值为jqXHR类型,返回发送该请求的jqXHR对象(jQuery 1.4及以前版本返回的是原生的XMLHttpRequest对象)。
示例&说明
jQuery.getJSON()
是jQuery.ajax()
函数的如下简写形式:
jQuery.getJSON(url, data, success);
// 等价于
$.ajax({
url: url,
type: "GET",
data: data,
success: success,
dataType: "json"
});
请参考以下这段HTML示例代码:
<div id="content1">CodePlayerdiv>
<div id="content2">专注于编程开发技术分享div>
<div id="content3">http://www.365mini.comdiv>
以下是与jQuery.getJSON()
函数相关的jQuery示例代码,以演示jQuery.getJSON()
函数的具体用法:
//获取index.php?type=json的JSON数据,但不作任何处理
$.getJSON( "index.php?type=json" );
// 等价于 index.php?id=5&orderId=5&money=100
$.getJSON( "index.php?id=5", "orderId=5&money=100" );
// 等价于 http://localhost/index.php?id=5&orderId=5&money=100
$.getJSON( "http://localhost/index.php?id=5", {orderId: 5, money: 100} );
/* ***** 一般不会使用上述不对获取的JSON数据作任何处理的用法***** */
// 获取index.php?type=json的JSON数据,获取成功时弹出对话框
$.getJSON( "index.php?type=json", function(data, textStatus, jqXHR){
// data 是该请求返回的数据(可能经过处理)
// textStatus 可能是"success"、 "notmodified"等
// jqXHR 是经过jQuery封装的XMLHttpRequest对象(保留其本身的所有属性和方法)
// 如果服务器返回的JSON格式的数据是 {"id": 5, "name": "CodePlayer"}
// JSON格式的数据的属性名称必须加双引号,字符串值必须加双引号。
// jQuery已经将其转换成对应的JS对象
alert( data.id ); // 5
alert( data.name ); // CodePlayer
} );
// 获取"/action.php?m=list&page=2&size=10"的JSON数据,获取成功时弹出对话框
$.getJSON( "/action.php?m=list", { page: 2, size: 10 }, function(data, textStatus, jqXHR){
// 如果服务器返回的JSON格式的数据是 [ {"id":11, "title":"文章11"}, {"id":12, "title":"文章12"}, {"id":13, "title":"文章13"} ]
// jQuery将获取的JSON格式数据转换为JS数组
for(var i in data){
var obj = data[i];
alert( obj.title );
}
} );