Jquery之Ajax運用學習運用篇

更新時間：2011年09月26日 20:54:33 作者：

JQuery中Ajax的運用相信很多人都已熟悉，本文主要是記錄下個人實踐中的應用知識，旨在加強記憶。

還是先說一些基礎知識：
語法：$.ajax({option})
option表示參數(shù)。以key/value形式出現(xiàn)。
常用參數(shù)：type:post/get。
　　　　　url:發(fā)送請求的地址。
　　　　　data:{object:object} 發(fā)送到服務器的數(shù)據(jù)，必須為key/value格式?？梢栽O置processData屬性，不轉(zhuǎn)換數(shù)據(jù)格式。
　　　　　success:function(msg){} 請求成功后回調(diào)函數(shù)。
　　　　　error:function(msg){} 請求失敗后回調(diào)函數(shù)。
　　　　 dataType:xml/html/script/json/jsonp 返回的數(shù)據(jù)類型。
再看實例理解：
1.用Ajax實現(xiàn)無刷新審核功能（點擊審核后，LinkButton不可用，并改為已審核）。
界面如下：

這里數(shù)據(jù)顯示用的是Repeater控件，其中審核按鈕為LinkButton服務器控件。

頁面Html代碼：

復制代碼代碼如下:

 
<body> 
<form id="form1" runat="server"> 
<div> 
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="Main_List_Table" 
rules="none"> 
<tr class="Main_List_Table_Tr1"> 
<td width="5%"> 
選擇 
</td> 
<td width="18%"> 
單號 
</td> 
<td width="15%"> 
狀態(tài) 
</td> 
<td width="18%"> 
店鋪 
</td> 
<td width="18%"> 
購買者 
</td> 
<td width="13%"> 
RMB 
</td> 
<td> 
操作 
</td> 
</tr> 
<asp:Repeater ID="rpt_Review" runat="server"> 
<ItemTemplate> 
<tr onmouseover="this.className='Main_List_Table_Tr_Over'" onmouseout="this.className='Main_List_Table_Tr_Out'"> 
<td> 
<input type="checkbox" id="OrderId_<%#Eval("OrderId") %>" name="OrderId" value="<%#Eval("OrderId") %>" /> 
</td> 
<td> 
<%#Eval("OrderId") %></a> 
</td> 
<td> 
<%# Eval("oState").ToString() %> 
</td> 
<td> 
1號店鋪 
</td> 
<td> 
張三 
</td> 
<td> 
100.00 
</td> 
<td> 
<asp:LinkButton ID="lbtn_Audit_eShop_Price" runat="server">審核</asp:LinkButton> 
</td> 
</tr> 
</ItemTemplate> 
</asp:Repeater> 
</table> 
</div> 
<div class="padding_Top10"> 
<label for="sel_All" style="cursor: pointer"> 
<input type="checkbox" name="sel_All" id="sel_All" onclick="selectAll('sel_All', 'OrderId');" />全選/反選</label>&nbsp;&nbsp; 
<input type="button" id="btn_Batch_Review" onclick="return Batch_Review();" value="批量審核" /> 
</div> 
</form> 
</body> 

實現(xiàn)代碼如下：
a.腳本代碼：

復制代碼代碼如下:

 
function lbtn_Audit_eShop_Price_Command(obj,orderId) 
{ 
if (obj.innerHTML != "審核") return false; 
if (!confirm("確定要審核嗎？")) { 
return false; 
} 
$.ajax({ 
type:"post",//Post發(fā)送方式 
url:"AjaxTest.aspx",//請求地址為本頁面地址 
data:{OrderId:orderId,Action:"Single_Review"},//傳入數(shù)據(jù)為訂單號以及Action 
success:(function(msg){ 
if(msg!="") 
{ 
var chkId = "OrderId_"+orderId; 
document.getElementById(chkId).disabled = "disabled"; 
obj.disabled = "disabled"; 
obj.innerHTML = "已審核"; 
} 
}) 
}); 
return false; 
} 

b.服務器代碼：
根據(jù)Action判斷事件的執(zhí)行。

復制代碼代碼如下:

 
protected void Page_Load(object sender, EventArgs e) 
{ 
Conn.Open(); 
//執(zhí)行動作 
string Action = CommFun.Get_Safe_Str(Request["Action"]); 
if (!IsPostBack) 
{ 
if (Action == "") 
{ 
rpt_Pro_Order_List_Bind(); 
} 
else if (Action == "Single_Review") //點擊審核 
{ 
lbtn_Audit_eShop_Price_Command(); 
} 
else //點擊批量審核 
{ 
btn_Batch_Review_eShop_Price(); 
} 
} 
} 

Repeater綁定數(shù)據(jù)后,為LinkButton添加onclick屬性,用于執(zhí)行頁面腳本代碼。

復制代碼代碼如下:

 
protected void rpt_Pro_Order_List_Bind() 
{ 
…… 
this.rpt_Review.DataSource = Dt; 
this.rpt_Review.DataBind(); 
for (int i = 0; i < this.rpt_Review.Items.Count; i++) 
{ 
LinkButton lbtn_Audit_eShop_Price = (LinkButton)this.rpt_Review.Items[i].FindControl("lbtn_Audit_eShop_Price"); 
if (Dt.Rows[i]["Audit_eShop_Price"].ToString() == "1") 
{ 
lbtn_Audit_eShop_Price.Enabled = false; 
lbtn_Audit_eShop_Price.Text = "已審核"; 
} 
else 
{ 
lbtn_Audit_eShop_Price.Enabled = true; 
lbtn_Audit_eShop_Price.Attributes.Add("onclick", 
"return lbtn_Audit_eShop_Price_Command(this, '" + Dt.Rows[i]["OrderId"].ToString() + "');"); 
} 
} 
} 
[code] 
2.用Ajax實現(xiàn)無刷新批量審核。 
注意：這里用到的控件必須是Html控件，否則會引起回發(fā)。但在Repeater內(nèi)部服務器控件也可以使用。 
這里只需給input="btton"添加一個onclick屬性，直接執(zhí)行Ajax腳本。 
腳本內(nèi)容如下： 
[code] 
//批量審核 
function Batch_Review() 
{ 
if(!checkSelItem("OrderId","請選擇訂單！")) return false; 
if(!confirm("確定要審核嗎？")) return false; 
var OrderIds = ""; //記錄所有訂單號 
var elements = document.getElementsByName("OrderId"); 
for (var m=0; m < elements.length; m++){ 
if(m == elements.length - 1) 
{ 
OrderIds = OrderIds + elements[m].value; 
} 
else 
{ 
OrderIds = OrderIds + elements[m].value + ","; 
} 
} 
var orderIdArr = OrderIds.split(','); 
var newOrderIdStr = ""; 
var j = 0;//記錄選擇的訂單個數(shù) 
var position = "";//記錄選擇的訂單位置 
for(var i = 0;i<orderIdArr.length;i++) 
{ 
var chk_Id = "OrderId_"+orderIdArr[i]; 
if($_Id(chk_Id).checked)//記錄選中的訂單 
{ 
if(i == orderIdArr.length - 1) 
{ 
newOrderIdStr += orderIdArr[i]; 
position += i; 
} 
else 
{ 
newOrderIdStr += orderIdArr[i]+","; 
position += i + ","; 
} 
j++; 
} 
} 
newOrderIdStr = RemoveRightComma(newOrderIdStr);//去除末尾逗號后的訂單號 
position = RemoveRightComma(position);//去除末尾逗號后的位置 
$.ajax({ 
type: "POST", 
url: "AjaxTest.aspx", 
data: { Order_Id_Arr: newOrderIdStr, Action: "Batch_Review" }, 
success: function(msg) { 
if (msg != "") { 
for(var k = 0 ;k<j;k++) 
{ 
var newOrderIdArr = newOrderIdStr.split(','); 
var positionArr = position.split(','); 
$_Id("OrderId_"+newOrderIdArr[k]).disabled = "disabled"; 
if(parseInt(positionArr[k])<10) 
{ 
$_Id("rpt_Review_ctl0"+parseInt(positionArr[k])+"_lbtn_Audit_eShop_Price").innerHTML = "已審核"; 
$_Id("rpt_Review_ctl0"+parseInt(positionArr[k])+"_lbtn_Audit_eShop_Price").disabled = "disabled"; 
} 
else 
{ 
$_Id("rpt_Review_ctl"+parseInt(positionArr[k])+"_lbtn_Audit_eShop_Price").innerHTML = "已審核"; 
$_Id("rpt_Review_ctl"+parseInt(positionArr[k])+"_lbtn_Audit_eShop_Price").disabled = "disabled"; 
} 
} 
} 
} 
}) 
return true; 
} 
//去除右邊逗號 
function RemoveRightComma(str) 
{ 
if(str == "") return; 
var i; 
for(i = str.length-1;i>=0;i--) 
{ 
//charAt(i)取某一個位置的字符 
if(str.charAt(i) != ",") break; 
} 
//截取字符串，substring(start,stop);返回的結(jié)果不包含最后一位 
str = str.substring(0,i+1); 
return str; 
} 

至此實例講解結(jié)束。
最后回顧思路：
1.單條審核：在頁面初始化時，給審核按鈕加上onclick屬性，執(zhí)行頁面腳本，單擊審核后，后臺的page_load事件根據(jù)Action選擇執(zhí)行的事件。
2.批量審核: 給批量審核按鈕加上onclick屬性，執(zhí)行Ajax腳本，后臺的page_load事件同樣根據(jù)Action選擇執(zhí)行的事件。批量審核按鈕必須為Html控件。

您可能感興趣的文章: