jquery中ajax调用json数据
$.get()和$.post()
$.get()和$.post()这两个方法基本都一样使用,所以这里就以$.post()为例来进行讲解!
情形1 |
$.post("url",function);此时返回的数据没有处理,所以不是json格式! |
情形2 |
$.post("url",function, "json");此时虽然指定了返回的数据为json格式,但实际上却不是! |
情形3 |
$.post("url",{},function);此时传入的参数为空,没有指定返回的数据格式,所以也不是json格式! |
情形4 |
$.post("url",{},function, "json");正确的返回了json格式的数据! |
要点:当要把返回的数据当做的json格式来处理,必须传入参数(参数为空就写成{}),并且还得指定返回类型为"json"!
$.ajax({
url:"url",
dataType:"json",
type:"get"
success:function
})
要点:指定dataType为"json",此时get/post方式都会得到json格式数据,但为了和上面的两个方法保持一致,最好加上data:{}这个条件。
$.getJSON("url",function)
要点:以get的方式得到json格式数据,是$.get()的方便写法吧!
jQuery Ajax用法详解
jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,处理复杂的ajax请求时,jQuery使用jQuery.ajax()方法进行处理。
在jQuery中有一些简单的方法,它对jQuery.ajax()方法进行了封装,使得处理一些简单的Ajax事件时,不需要使用jQuery.ajax()方法。
以下5个方法执行一般Ajax请求的简短形式,在处理复杂的Ajax请求时应该使用jQuery.ajax()。
1、load(url,[data],[callback])
载入远程HTML文件代码并插入至DOM中,默认使用GET方式,传递参数时自动转换为POST方式。
url |
要载入的远程url地址 |
data |
发送至服务器的key/value 数据 |
callback |
载入成功时的回调函数 |
示例代码如下:
//无参数、无回调函数
$("#showload").load("load.htm");
//无回调函数
$("#showload").load("load.htm", { "para": "para-value" });
$("#showload").load("load.htm", { "para": "para-value" },
function() {
//处理
})
这里将显示加载的文件的内容Load
2、jQuery.get(url, [data], [callback])
使用get方式从服务器端获取数据。
发送请求的URL地址
要发送给服务器的数据
载入成功时回调函数
示例代码如下:
$.get("jqueryget.htm", { "id": this.id },
function(req) {
//成功时的回调方法
$("#showget").html(req);
});
})
使用$.get()方法,通过传递id来获取不同的logo。
此时是通过get方法获得请求,所以在获取参数值时要使用Request.QueryString,可以看Request Request.QueryString的区别
3、百度logo谷歌logo
这里将显示
logo3.jQuery.post(url, \[data\], \[callback\])
使用POST方式来进行异步请求。同jQuery.get()相比,差别在于请求的方式
4、jQuery.getScript(url,[callback])
通过 GET 方式请求载入并执行一个JavaScript文件。
5、jQuery.getJSON(url,[data],[callback])
通过get方式获取json格式的数据。
示例代码如下:
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?", function(req) {
$.each(req.items, function(i, item) {
if (i == vnum) {
$("<img src="" + item.media.m + "" title="" + item.title + "" />").appendTo("#showjson");
}
});
});
同样的,这也是jQuery.ajax()方法的一种简写方法,类似如下方法:
参数列表:
参数名 |
类型 |
描述 |
url |
String |
(默认: 当前页地址) 发送请求的地址。 |
type |
String |
(默认: "GET") 请求方式 ("POST" 或 "GET"), 默认为 "GET"。 注意:其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用 但仅部分浏览器支持。 |
timeout |
Number |
设置请求超时时间(毫秒)。此设置将覆盖全局设置。 |
async |
Boolean |
(默认: true) 默认设置下,所有请求均为异步请求。 |
beforeSend |
Function |
发送请求前可修改 XMLHttpRequest 对象的函数,如添加自定义 HTTP 头。 XMLHttpRequest 对象是唯一的参数。 |
cache |
Boolean |
(默认: true) jQuery 1.2 新功能,设置为 false 将不会从浏览器缓存中加载请求信息。 |
complete |
Function |
请求完成后回调函数 (请求成功或失败时均调用)。 参数: XMLHttpRequest 对象,成功信息字符串。 |
contentType |
String |
(默认: "application/x-www-form-urlencoded") 发送信息至服务器时内容编码类型。默认值适合大多数应用场合。 |
data |
Object, String |
发送到服务器的数据。将自动转换为请求字符串格式。 |
dataType |
String |
预期服务器返回的数据类型。 如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息返回 responseXML 或 responseText,并作为回调函数参数传递, 可用值: "xml": 返回 XML 文档,可用 jQuery 处理。 "html": 返回纯文本 HTML 信息;包含 script 元素。 "script": 返回纯文本 JavaScript 代码。不会自动缓存结果。 "json": 返回 JSON 数据 。 "jsonp": JSONP 格式。使用 JSONP 形式调用函数时, 如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名, 以执行回调函数。 |
error |
Function |
(默认: 自动判断 (xml 或 html)) 请求失败时将调用此方法。这个方法有三个参数 XMLHttpRequest 对象 错误信息 可能捕获的错误对象。 |
global |
Boolean |
(默认: true) 是否触发全局 AJAX 事件。设置为 false 将不会触发全局 AJAX 事件 如 ajaxStart 或 ajaxStop 。可用于控制不同的Ajax事件 |
ifModified |
Boolean |
(默认: false) 仅在服务器数据改变时获取新数据。 使用 HTTP 包 Last-Modified 头信息判断。 |
processData |
Boolean |
(默认: true) 默认情况下,发送的数据将被转换为对象以配合默认内容类型 "application/x-www-form-urlencoded"。 如果要发送 DOM 树信息或其它不希望转换的信息,请设置为 false。 |
success |
Function |
请求成功后回调函数。这个方法有两个参数:服务器返回数据,返回状态 |
这里有几个Ajax事件参数:beforeSend ,success ,complete ,error 。
可以定义这些事件来很好的处理每一次的Ajax请求。
注意:这些Ajax事件里面的 this 都是指向Ajax请求的选项信息的(请参考说 get() 方法时的this的图片)。
代码如下:
$.ajax({
url: url,
dataType: 'json',
data: data,
success: callback
});
这里将随机显示一条json数据,到目前为止总结了jQuery.ajax的五种简写方法
接下来看jQuery.ajax()方法,多数情况需要对ajax请求出错的情况进行捕捉并处理。
jQuery.ajax()
使用jQuery.ajax()方法获取数据,下边给个常用写法,并做了相应的注释。
代码如下:
$.ajax({
url: "http://www.hzhuti.com", //请求的url地址
dataType: "json", //返回格式为json
async: true, //请求是否异步,默认为异步,这也是ajax重要特性
data: { "id": "value" }, //参数值
type: "GET", //请求方式
beforeSend: function() {
//请求前的处理
},
success: function(req) {
//请求成功时处理
},
complete: function() {
//请求完成的处理
},
error: function() {
//请求出错处理
}
});
使用jQuery.ajax()
这里将显示数据。
$.ajax 实际应用例子:
//1.$.ajax带json数据的异步请求
var aj = $.ajax( {
url:'productManager_reverseUpdate',// 跳转到 action
data:{
selRollBack : selRollBack,
selOperatorsCode : selOperatorsCode,
PROVINCECODE : PROVINCECODE,
pass2 : pass2
},
type:'post',
cache:false,
dataType:'json',
success:function(data) {
if(data.msg =="true" ){
// view("修改成功!");
alert("修改成功!");
window.location.reload();
}else{
view(data.msg);
}
},
error : function() {
// view("异常!");
alert("异常!");
}
});
//2.$.ajax序列化表格内容为字符串的异步请求
function noTips(){
var formParam = $("#form1").serialize();//序列化表格内容为字符串
$.ajax({
type:'post',
url:'Notice_noTipsNotice',
data:formParam,
cache:false,
dataType:'json',
success:function(data){
}
});
}
//3.$.ajax拼接url的异步请求
var yz=$.ajax({
type:'post',
url:'validatePwd2_checkPwd2?password2='+password2,
data:{},
cache:false,
dataType:'json',
success:function(data){
if( data.msg =="false" ) //服务器返回false,就将validatePassword2的值改为pwd2Error,这是异步,需要考虑返回时间
{
textPassword2.html("<font color='red'>业务密码不正确!</font>");
$("#validatePassword2").val("pwd2Error");
checkPassword2 = false;
return;
}
},
error:function(){}
});
//4.$.ajax拼接data的异步请求
$.ajax({
url:'<%=request.getContextPath()%>/kc/kc_checkMerNameUnique.action',
type:'post',
data:'merName='+values,
async : false, //默认为true 异步
error:function(){
alert('error');
},
success:function(data){
$("#"+divs).html(data);
}
});