Jquery之Ajax运用_学习运用篇
JQuery中Ajax的运用相信很多人都已熟悉，本文主要是记录下个人实践中的应用知识，旨在加强记忆。
还是先说一些基础知识：
语法：$.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代码：
View Code
1 <body>
2 <form id="form1" runat="server">
3 <div>
4 <table width="100%" border="0" cellspacing="0" cellpadding="0" class="Main_List_Table"
5 rules="none">
6 <tr class="Main_List_Table_Tr1">
7 <td width="5%">
8 选择
9 </td>
10 <td width="18%">
11 单号
12 </td>
13 <td width="15%">
14 状态
15 </td>
16 <td width="18%">
17 店铺
18 </td>
19 <td width="18%">
20 购买者
21 </td>
22 <td width="13%">
23 RMB
24 </td>
25 <td>
26 操作
27 </td>
28 </tr>
29 <asp:Repeater ID="rpt_Review" runat="server">
30 <ItemTemplate>
31 <tr onmouseover="this.className='Main_List_Table_Tr_Over'" onmouseout="this.className='Main_List_Table_Tr_Out'">
32 <td>
33 <input type="checkbox" id="OrderId_<%#Eval("OrderId") %>" name="OrderId" value="<%#Eval("OrderId") %>" />
34 </td>
35 <td>
36 <%#Eval("OrderId") %></a>
37 </td>
38 <td>
39 <%# Eval("oState").ToString() %>
40 </td>
41 <td>
42 1号店铺
43 </td>
44 <td>
45 张三
46 </td>
47 <td>
48 100.00
49 </td>
50 <td>
51 <asp:LinkButton ID="lbtn_Audit_eShop_Price" runat="server">审核</asp:LinkButton>
52 </td>
53 </tr>
54 </ItemTemplate>
55 </asp:Repeater>
56 </table>
57 </div>
58 <div class="padding_Top10">
59 <label for="sel_All" style="cursor: pointer">
60 <input type="checkbox" name="sel_All" id="sel_All" onclick="selectAll('sel_All', 'OrderId');"/>全选/反选</label>
61 <input type="button" id="btn_Batch_Review" onclick="return Batch_Review();" value="批量审核"/>
62 </div>
63 </form>
64 </body>
实现代码如下：
a.脚本代码：
View Code
1 function lbtn_Audit_eShop_Price_Command(obj,orderId)
2 {
3 if (obj.innerHTML != "审核") return false;
4 if (!confirm("确定要审核吗？")) {
5 return false;
6 }
7 $.ajax({
8 type:"post",//Post发送方式
9 url:"AjaxTest.aspx",//请求地址为本页面地址
10 data:{OrderId:orderId,Action:"Single_Review"},//传入数据为订单号以及Action
11 success:(function(msg){
12 if(msg!="")
13 {
14 var chkId = "OrderId_"+orderId;
15 document.getElementById(chkId).disabled = "disabled";
16 obj.disabled = "disabled";
17 obj.innerHTML = "已审核";
18 }
19 })
20 });
21 return false;
22 }
b.服务器代码：
根据Action判断事件的执行。
View Code
1 protected void Page_Load(object sender, EventArgs e)
2 {
3 Conn.Open();
4 //执行动作
5 string Action = CommFun.Get_Safe_Str(Request["Action"]);
6 if (!IsPostBack)
7 {
8 if (Action == "")
9 {
10 rpt_Pro_Order_List_Bind();
11 }
12 else if (Action == "Single_Review") //点击审核
13 {
14 lbtn_Audit_eShop_Price_Command();
15 }
16 else //点击批量审核
17 {
18 btn_Batch_Review_eShop_Price();
19 }
20 }
21 }
Repeater绑定数据后,为LinkButton添加onclick属性,用于执行页面脚本代码。
View Code
1 protected void rpt_Pro_Order_List_Bind()
2 {
3 ……
4 this.rpt_Review.DataSource = Dt;
5 this.rpt_Review.DataBind();
6
7 for (int i = 0; i < this.rpt_Review.Items.Count; i++)
8 {
9 LinkButton lbtn_Audit_eShop_Price = (LinkButton)this.rpt_Review.Items[i].FindControl("lbtn_Audit_eShop_Price");
10 if (Dt.Rows[i]["Audit_eShop_Price"].ToString() == "1")
11 {
12 lbtn_Audit_eShop_Price.Enabled = false;
13 lbtn_Audit_eShop_Price.Text = "已审核";
14 }
15 else
16 {
17 lbtn_Audit_eShop_Price.Enabled = true;
18 lbtn_Audit_eShop_Price.Attributes.Add("onclick",
19 "return lbtn_Audit_eShop_Price_Command(this, '" + Dt.Rows[i]["OrderId"].ToString() + "');");
20 }
21 }
22 }
2.用Ajax实现无刷新批量审核。
注意：这里用到的控件必须是Html控件，否则会引起回发。但在Repeater内部服务器控件也可以使用。
这里只需给input="btton"添加一个onclick属性，直接执行Ajax脚本。
脚本内容如下：
View Code
1 //批量审核
2 function Batch_Review()
3 {
4 if(!checkSelItem("OrderId","请选择订单！")) return false;
5 if(!confirm("确定要审核吗？")) return false;
6
7 var OrderIds = ""; //记录所有订单号
8 var elements = document.getElementsByName("OrderId");
9 for (var m=0; m < elements.length; m++){
10 if(m == elements.length - 1)
11 {
12 OrderIds = OrderIds + elements[m].value;
13 }
14 else
15 {
16 OrderIds = OrderIds + elements[m].value + ",";
17 }
18 }
19
20 var orderIdArr = OrderIds.split(',');
21 var newOrderIdStr = "";
22 var j = 0;//记录选择的订单个数
23 var position = "";//记录选择的订单位置
24
25 for(var i = 0;i<orderIdArr.length;i++)
26 {
27 var chk_Id = "OrderId_"+orderIdArr[i];
28 if($_Id(chk_Id).checked)//记录选中的订单
29 {
30 if(i == orderIdArr.length - 1)
31 {
32 newOrderIdStr += orderIdArr[i];
33 position += i;
34 }
35 else
36 {
37 newOrderIdStr += orderIdArr[i]+",";
38 position += i + ",";
39 }
40 j++;
41 }
42 }
43 newOrderIdStr = RemoveRightComma(newOrderIdStr);//去除末尾逗号后的订单号
44 position = RemoveRightComma(position);//去除末尾逗号后的位置
45 $.ajax({
46 type: "POST",
47 url: "AjaxTest.aspx",
48 data: { Order_Id_Arr: newOrderIdStr, Action: "Batch_Review" },
49 success: function(msg) {
50 if (msg != "") {
51 for(var k = 0 ;k<j;k++)
52 {
53 var newOrderIdArr = newOrderIdStr.split(',');
54 var positionArr = position.split(',');
55 $_Id("OrderId_"+newOrderIdArr[k]).disabled = "disabled";
56 if(parseInt(positionArr[k])<10)
57 {
58 $_Id("rpt_Review_ctl0"+parseInt(positionArr[k])+"_lbtn_Audit_eShop_Price").innerHTML = "已审核";
59 $_Id("rpt_Review_ctl0"+parseInt(positionArr[k])+"_lbtn_Audit_eShop_Price").disabled = "disabled";
60 }
61 else
62 {
63 $_Id("rpt_Review_ctl"+parseInt(positionArr[k])+"_lbtn_Audit_eShop_Price").innerHTML = "已审核";
64 $_Id("rpt_Review_ctl"+parseInt(positionArr[k])+"_lbtn_Audit_eShop_Price").disabled = "disabled";
65 }
66 }
67 }
68 }
69 })
70 return true;
71 }
72
73 //去除右边逗号
74 function RemoveRightComma(str)
75 {
76 if(str == "") return;
77 var i;
78 for(i = str.length-1;i>=0;i--)
79 {
80 //charAt(i)取某一个位置的字符
81 if(str.charAt(i) != ",") break;
82 }
83 //截取字符串，substring(start,stop);返回的结果不包含最后一位
84 str = str.substring(0,i+1);
85 return str;
86 }
至此实例讲解结束。
最后回顾思路：
1.单条审核：在页面初始化时，给审核按钮加上onclick属性，执行页面脚本，单击审核后，后台的page_load事件根据Action选择执行的事件。
2.批量审核: 给批量审核按钮加上onclick属性，执行Ajax脚本，后台的page_load事件同样根据Action选择执行的事件。批量审核按钮必须为Html控件。
-----------------------------------------------------结束！欢迎指摘与交流------------------------------------------------------------------
