Jquery之Ajax运用 学习运用篇


Posted in Javascript onSeptember 26, 2011

还是先说一些基础知识:
语法:$.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不可用,并改为已审核)。
界面如下:
Jquery之Ajax运用 学习运用篇
这里数据显示用的是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控件。
Javascript 相关文章推荐
javascript 正则替换 replace(regExp, function)用法
May 22 Javascript
xml文档转换工具,附图表例子(hta)
Nov 17 Javascript
基于JQuery制作的产品广告效果
Dec 08 Javascript
jQuery1.6 正式版发布并提供下载
May 05 Javascript
dwz 如何去掉ajaxloading具体代码
May 22 Javascript
jquery checkbox 勾选的bug问题解决方案与分析
Nov 13 Javascript
javascript实现检验的各种规则
Jul 31 Javascript
js实现下拉列表选中某个值的方法(3种方法)
Dec 17 Javascript
微信小程序(应用号)简单实例应用及实例详解
Sep 26 Javascript
js无提示关闭浏览器窗口的两种方法分析
Nov 06 Javascript
JavaScript利用闭包实现模块化
Jan 13 Javascript
了解在JavaScript中将值转换为字符串的5种方法
Jun 06 Javascript
jQuery+CSS 实现随滚动条增减的汽水瓶中的液体效果
Sep 26 #Javascript
在Windows上安装Node.js模块的方法
Sep 25 #Javascript
javascript权威指南 学习笔记之null和undefined
Sep 25 #Javascript
利用JS自动打开页面上链接的实现代码
Sep 25 #Javascript
javascript权威指南 学习笔记之javascript数据类型
Sep 24 #Javascript
最简单的js图片切换效果实现代码
Sep 24 #Javascript
zShowBox 图片放大展示jquery版 兼容性
Sep 24 #Javascript
You might like
Protoss魔法科技
2020/03/14 星际争霸
坏狼php学习 计数器实例代码
2008/06/15 PHP
php 全文搜索和替换的实现代码
2008/07/29 PHP
IIS7.X配置PHP运行环境小结
2011/06/09 PHP
Php中用PDO查询Mysql来避免SQL注入风险的方法
2013/04/25 PHP
php根据某字段对多维数组进行排序的方法
2015/03/07 PHP
PHP基本语法实例总结
2016/09/09 PHP
Laravel的throttle中间件失效问题解决方法
2016/10/09 PHP
PHP后期静态绑定之self::限制实例分析
2018/12/21 PHP
javascript实现的使用方向键控制光标在table单元格中切换
2010/11/17 Javascript
按下Enter焦点移至下一个控件的实现js代码
2013/12/11 Javascript
JavaScript运行时库属性一览表
2014/03/14 Javascript
javascript特殊日历控件分享
2016/03/07 Javascript
微信小程序 progress组件详解及实例代码
2016/10/25 Javascript
jQuery制作图片旋转效果
2017/02/02 Javascript
JavaScript和JQuery获取DIV值的方法示例
2017/03/07 Javascript
详解微信小程序设置底部导航栏目方法
2017/06/29 Javascript
JavaScript基础心法 深浅拷贝(浅拷贝和深拷贝)
2018/03/05 Javascript
vue-cli在 history模式下的配置详解
2019/11/26 Javascript
vue data对象重新赋值无效(未更改)的解决方式
2020/07/24 Javascript
python基础教程之循环介绍
2014/08/29 Python
Python列表append和+的区别浅析
2015/02/02 Python
Linux 修改Python命令的方法示例
2018/12/03 Python
Python 中PyQt5 点击主窗口弹出另一个窗口的实现方法
2019/07/04 Python
解析python 类方法、对象方法、静态方法
2020/08/15 Python
HTML5 b和i标记将被赋予真正的语义
2009/07/16 HTML / CSS
C# .NET面试题
2015/11/28 面试题
大学生职业规划前言模板
2013/12/27 职场文书
绩效工资分配方案
2014/01/18 职场文书
先进班级集体事迹材料
2014/01/30 职场文书
关于感恩的演讲稿200字
2014/08/26 职场文书
倡议书作文
2015/01/19 职场文书
运动员加油词
2015/07/18 职场文书
确保减税降费落地生根,用实实在在措施
2019/07/19 职场文书
java调用Restful接口的三种方法
2021/08/23 Java/Android
Mysql 一主多从的部署
2022/05/20 MySQL