Jquery之Ajax运用

来源：广州中睿信息技术有限公司官网

发布时间：2012/10/21 23:25:16 编辑：editor 阅读 318 次

JQuery中Ajax的运用相信很多人都已熟悉，本文主要是记录下个人实践中的应用知识，旨在加强记忆。还是先说一些基础知识：语法：$.ajax({option})option表示参数。以key/val

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 &lt;body&gt;   2     &lt;form id="form1" runat="server"&gt;   3     &lt;div&gt;   4         &lt;table width="100%" border="0" cellspacing="0" cellpadding="0" class="Main_List_Table"   5             rules="none"&gt;   6             &lt;tr class="Main_List_Table_Tr1"&gt;   7                 &lt;td width="5%"&gt;   8                     选择   9                 &lt;/td&gt;  10                 &lt;td width="18%"&gt;  11                     单号  12                 &lt;/td&gt;  13                 &lt;td width="15%"&gt;  14                     状态  15                 &lt;/td&gt;  16                 &lt;td width="18%"&gt;  17                     店铺  18                 &lt;/td&gt;  19                 &lt;td width="18%"&gt;  20                     购买者  21                 &lt;/td&gt;  22                 &lt;td width="13%"&gt;  23                     RMB  24                 &lt;/td&gt;  25                 &lt;td&gt;  26                     操作  27                 &lt;/td&gt;  28             &lt;/tr&gt;  29             &lt;asp:Repeater ID="rpt_Review" runat="server"&gt;  30                 &lt;ItemTemplate&gt;  31                     &lt;tr onmouseover="this.className='Main_List_Table_Tr_Over'" onmouseout="this.className='Main_List_Table_Tr_Out'"&gt;  32                         &lt;td&gt;  33                             &lt;input type="checkbox" id="OrderId_&lt;%#Eval("OrderId") %&gt;" name="OrderId" value="&lt;%#Eval("OrderId") %&gt;" /&gt;  34                         &lt;/td&gt;  35                         &lt;td&gt;  36                             &lt;%#Eval("OrderId") %&gt;&lt;/a&gt;  37                         &lt;/td&gt;  38                         &lt;td&gt;  39                             &lt;%# Eval("oState").ToString() %&gt;  40                         &lt;/td&gt;  41                         &lt;td&gt;  42                             1号店铺  43                         &lt;/td&gt;  44                         &lt;td&gt;  45                             张三  46                         &lt;/td&gt;  47                         &lt;td&gt;  48                             100.00  49                         &lt;/td&gt;  50                         &lt;td&gt;  51                             &lt;asp:LinkButton ID="lbtn_Audit_eShop_Price" runat="server"&gt;审核&lt;/asp:LinkButton&gt;  52                         &lt;/td&gt;  53                     &lt;/tr&gt;  54                 &lt;/ItemTemplate&gt;  55             &lt;/asp:Repeater&gt;  56         &lt;/table&gt;  57     &lt;/div&gt;  58     &lt;div class="padding_Top10"&gt;  59         &lt;label for="sel_All" style="cursor: pointer"&gt;  60             &lt;input type="checkbox" name="sel_All" id="sel_All" onclick="selectAll('sel_All', 'OrderId');" /&gt;全选/反选&lt;/label&gt;&amp;nbsp;&amp;nbsp;  61         &lt;input type="button" id="btn_Batch_Review" onclick="return Batch_Review();" value="批量审核" /&gt;  62     &lt;/div&gt;  63     &lt;/form&gt;  64 &lt;/body&gt;

实现代码如下：

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

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 &lt; 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 &lt; 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&lt;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&lt;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])&lt;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&gt;=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控件。

愿景：成为最专业的软件研发服务领航者
中睿信息技术有限公司广州•深圳	Tel：020-38931912	务实 Pragmatic
广州：广州市天河区翰景路1号金星大厦18层中睿信息	Fax：020-38931912	专业 Professional
深圳：深圳市福田区车公庙有色金属大厦509~510	Tel：0755-25855012	诚信 Integrity
所有权声明：PMI, PMP, Project Management Professional, PMI-ACP, PMI-PBA和PMBOK是项目管理协会(Project Management Institute, Inc.)的注册标志。