Jquery之Ajax運用 學習運用篇
編輯：JQuery特效代碼
還是先說一些基礎知識：
語法：$.ajax({option})
option表示參數。以key/value形式出現。
常用參數：type:post/get。
url:發送請求的地址。
data:{object:object} 發送到服務器的數據，必須為key/value格式。可以設置processData屬性，不轉換數據格式。
success:function(msg){} 請求成功後回調函數。
error:function(msg){} 請求失敗後回調函數。
dataType:xml/html/script/json/jsonp 返回的數據類型。
再看實例理解：
1.用Ajax實現無刷新審核功能（點擊審核後，LinkButton不可用，並改為已審核）。
界面如下：
這裡數據顯示用的是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%">
狀態
</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>
<input type="button" id="btn_Batch_Review" onclick="return Batch_Review();" value="批量審核" />
</div>
</form>
</body>
實現代碼如下：
a.腳本代碼：
代碼如下:
function lbtn_Audit_eShop_Price_Command(obj,orderId)
{
if (obj.innerHTML != "審核") return false;
if (!confirm("確定要審核嗎？")) {
return false;
}
$.ajax({
type:"post",//Post發送方式
url:"AjaxTest.aspx",//請求地址為本頁面地址
data:{OrderId:orderId,Action:"Single_Review"},//傳入數據為訂單號以及Action
success:(function(msg){
if(msg!="")
{
var chkId = "OrderId_"+orderId;
document.getElementById(chkId).disabled = "disabled";
obj.disabled = "disabled";
obj.innerHTML = "已審核";
}
})
});
return false;
}
b.服務器代碼：
根據Action判斷事件的執行。
代碼如下:
protected void Page_Load(object sender, EventArgs e)
{
Conn.Open();
//執行動作
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綁定數據後,為LinkButton添加onclick屬性,用於執行頁面腳本代碼。
代碼如下:
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實現無刷新批量審核。
注意：這裡用到的控件必須是Html控件，否則會引起回發。但在Repeater內部服務器控件也可以使用。
這裡只需給input="btton"添加一個onclick屬性，直接執行Ajax腳本。
腳本內容如下：
[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;//記錄選擇的訂單個數
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);返回的結果不包含最後一位
str = str.substring(0,i+1);
return str;
}
至此實例講解結束。
最後回顧思路：
1.單條審核：在頁面初始化時，給審核按鈕加上onclick屬性，執行頁面腳本，單擊審核後，後台的page_load事件根據Action選擇執行的事件。
2.批量審核: 給批量審核按鈕加上onclick屬性，執行Ajax腳本，後台的page_load事件同樣根據Action選擇執行的事件。批量審核按鈕必須為Html控件。
語法：$.ajax({option})
option表示參數。以key/value形式出現。
常用參數：type:post/get。
url:發送請求的地址。
data:{object:object} 發送到服務器的數據，必須為key/value格式。可以設置processData屬性，不轉換數據格式。
success:function(msg){} 請求成功後回調函數。
error:function(msg){} 請求失敗後回調函數。
dataType:xml/html/script/json/jsonp 返回的數據類型。
再看實例理解：
1.用Ajax實現無刷新審核功能（點擊審核後，LinkButton不可用，並改為已審核）。
界面如下：
這裡數據顯示用的是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%">
狀態
</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>
<input type="button" id="btn_Batch_Review" onclick="return Batch_Review();" value="批量審核" />
</div>
</form>
</body>
實現代碼如下：
a.腳本代碼：
代碼如下:
function lbtn_Audit_eShop_Price_Command(obj,orderId)
{
if (obj.innerHTML != "審核") return false;
if (!confirm("確定要審核嗎？")) {
return false;
}
$.ajax({
type:"post",//Post發送方式
url:"AjaxTest.aspx",//請求地址為本頁面地址
data:{OrderId:orderId,Action:"Single_Review"},//傳入數據為訂單號以及Action
success:(function(msg){
if(msg!="")
{
var chkId = "OrderId_"+orderId;
document.getElementById(chkId).disabled = "disabled";
obj.disabled = "disabled";
obj.innerHTML = "已審核";
}
})
});
return false;
}
b.服務器代碼：
根據Action判斷事件的執行。
代碼如下:
protected void Page_Load(object sender, EventArgs e)
{
Conn.Open();
//執行動作
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綁定數據後,為LinkButton添加onclick屬性,用於執行頁面腳本代碼。
代碼如下:
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實現無刷新批量審核。
注意：這裡用到的控件必須是Html控件，否則會引起回發。但在Repeater內部服務器控件也可以使用。
這裡只需給input="btton"添加一個onclick屬性，直接執行Ajax腳本。
腳本內容如下：
[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;//記錄選擇的訂單個數
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);返回的結果不包含最後一位
str = str.substring(0,i+1);
return str;
}
至此實例講解結束。
最後回顧思路：
1.單條審核：在頁面初始化時，給審核按鈕加上onclick屬性，執行頁面腳本，單擊審核後，後台的page_load事件根據Action選擇執行的事件。
2.批量審核: 給批量審核按鈕加上onclick屬性，執行Ajax腳本，後台的page_load事件同樣根據Action選擇執行的事件。批量審核按鈕必須為Html控件。
小編推薦
熱門推薦