还是先说一些基础知识：
语法：$.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 2
64 实现代码如下：
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至此实例讲解结束。
最后回顾思路： 1.单条审核：在页面初始化时，给审核按钮加上onclick属性，执行页面脚本，单击审核后，后台的page_load事件根据Action选择执行的事件。 2.批量审核: 给批量审核按钮加上onclick属性，执行Ajax脚本，后台的page_load事件同样根据Action选择执行的事件。批量审核按钮必须为Html控件。
-----------------------------------------------------结束！欢迎指摘与交流------------------------------------------------------------------
最新评论