快捷導(dǎo)航

jquery ajax例子返回值詳解

更新時間：2012年09月11日 17:45:01 作者：

$.ajax()跟($.post(),$.get())最主要的差別就是成功回調(diào)后,執(zhí)行success. . $.post(),$.get()就只能簡單的做下傳遞 ,返回. .后續(xù)工作沒法繼續(xù).所以看情況調(diào)用

在JQuery中，AJAX有三種實現(xiàn)方式：$.ajax() , $.post , $.get()。
首先我們看$.get():

復(fù)制代碼代碼如下:

 
$.get("test.jsp", 
{ name: "cssrain", time: "2008/01/21" }, //要傳遞的數(shù)據(jù) 
function(data){ 
alert("返回的數(shù)據(jù): " + data); 
} 
) 

然后看$.post():
跟$.get()格式一樣.

復(fù)制代碼代碼如下:

 
$.post("test.jsp", 
{ name: "cssrain", time: "2008/01/21" }, //要傳遞的數(shù)據(jù) 
function(data){ 
alert("返回的數(shù)據(jù): " + data); 
} 
) 

上面2種方式的區(qū)別應(yīng)該就是請求方式不同(一個get 一個post).
最后我們看$.ajax():

復(fù)制代碼代碼如下:

 
$.ajax({ 
url:'Accept.jsp', 
type:'post', //數(shù)據(jù)發(fā)送方式 
dataType:'html', //接受數(shù)據(jù)格式 (這里有很多,常用的有html,xml,js,json) 
data:'text='+$("#name").val()+'&date='+new Date(), //要傳遞的數(shù)據(jù) 
error: function(){ //失敗 
alert('Error loading document'); 
}, 
success: function(msg){ //成功 
alert( "Data Saved: " + msg ); 
} 
}); 

實例
前臺jsp部分的代碼如下：...
票數(shù):

復(fù)制代碼代碼如下:

 
<span id="i<%=id%>"><%=vote_number%></span><br/> 
<a onclick=myvote(<%=id%>); href='javascript:;'">投票</a> 

...
js部分的代碼如下

復(fù)制代碼代碼如下:

 
function myvote(id){ 
$.post("vote.jsp", { id: id }, 
function(data){ 
eval("var data="+data); 
if (data.issucc=="0"){ 
alert(data.mess) 
}else{ 
//alert("更新頁面"); 
$("#i"+data.myid).html(data.votenum); 
} 
}); 
} 

返回數(shù)據(jù)為json
后臺返回的json數(shù)據(jù)如下
{issucc:,mess:”“,votenum:,myid:}
issucc:是否成功
mess:信息，主要是錯誤信息，比如沒登錄，超過限制等
votenum：投票后的得票總數(shù)
myid:投票的id，用于更新頁面的投票數(shù)
一個注冊登錄實例
js
login.jsp返回的類型為text形式，正確時是“OK”，錯誤時是
“error”。

復(fù)制代碼代碼如下:

 
var userName; 
var password; 
var result; 
$(document).ready(function(){ 
$("#load").hide(); 
$("#success").hide(); 
$("#error").hide(); 
}); 
$(document).ready(function(){ 
$("#button").click(function(){ 
$("#error").hide(); 
$("#load").show("slow"); 
userName = $("#userName").val(); 
password = $("#password").val(); 
$.ajax({type: "post", 
url: "login.jsp", 
dataType: "html", 
data: "userName="+userName+"&password="+password, 
success: function(result){ 
var res = String($.trim(result)); 
if(res=="OK"){ 
$("#myTable").hide("slow"); 
$("#success").show("slow"); 
}else if(res=="error"){ 
$("#error").show("slow"); 
$("#load").hide("slow"); 
}else{ 
alert("返回異常");} 
} 
}); 
}); 
}); 

jsp頁面
第一種responseText格式

復(fù)制代碼代碼如下:

 
<%@ page language="java" pageEncoding="gb2312"%> 
<% 
String userName = request.getParameter("userName"); 
String password = request.getParameter("password"); 
if(password.equals("longleg")&&userName.equals("thy")){ 
out.print("OK"); 
}else{out.print("error");} 
%> 

您可能感興趣的文章: