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 相关文章推荐
E3 tree 1.6在Firefox下显示问题的修复方法
Jan 30 Javascript
简单的邮箱登陆的提示效果类似于yahoo邮箱
Feb 26 Javascript
jquery插件unobtrusive实现片段式加载
Jun 15 Javascript
JavaScript实现弹出DIV层同时页面背景渐变成半透明效果
Mar 25 Javascript
微信小程序 获取微信OpenId详解及实例代码
Oct 31 Javascript
vue.js学习之UI组件开发教程
Jul 03 Javascript
详解Webpack+Babel+React开发环境的搭建的方法步骤
Jan 09 Javascript
vue里面父组件修改子组件样式的方法
Feb 03 Javascript
vue axios 在页面切换时中断请求方法 ajax
Mar 05 Javascript
解决vue watch数据的方法被调用了两次的问题
Nov 07 Javascript
vue3使用vue-count-to组件的实现
Dec 25 Vue.js
ant design vue的form表单取值方法
Jun 01 Vue.js
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
php实现的在线人员函数库
2008/04/09 PHP
用PHP提取中英文词语以及数字的首字母的方法介绍
2013/04/23 PHP
Yii2实现上下联动下拉框功能的方法
2016/08/10 PHP
php mysql数据库操作类(实例讲解)
2017/08/06 PHP
php获取ajax的headers方法与内容实例
2017/12/27 PHP
JQuery中getJSON的使用方法
2010/12/13 Javascript
javascript怎么禁用浏览器后退按钮
2014/03/27 Javascript
JavaScript获取图片的原始尺寸以宽度为例
2014/05/04 Javascript
node.js开发中使用Node Supervisor实现监测文件修改并自动重启应用
2014/11/04 Javascript
JavaScript代码实现禁止右键、禁选择、禁粘贴、禁shift、禁ctrl、禁alt
2015/11/17 Javascript
全面解析多种Bootstrap图片轮播效果
2016/05/27 Javascript
Bootstrap 附加导航(Affix)插件实例详解
2016/06/01 Javascript
JS for...in 遍历语句用法实例分析
2016/08/24 Javascript
JS检测是否可以访问公网服务器功能代码
2017/06/19 Javascript
node.js操作MongoDB的实例详解
2017/10/11 Javascript
详解Angular如何正确的操作DOM
2018/07/06 Javascript
Vue动态修改网页标题的方法及遇到问题
2019/06/09 Javascript
iview form清除校验状态的实现
2019/09/19 Javascript
基于JavaScript获取base64图片大小
2019/10/18 Javascript
[01:36:17]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第一场 1月31日
2021/03/11 DOTA
Python中使用tarfile压缩、解压tar归档文件示例
2015/04/05 Python
Ubuntu 下 vim 搭建python 环境 配置
2017/06/12 Python
python select.select模块通信全过程解析
2017/09/20 Python
numpy排序与集合运算用法示例
2017/12/15 Python
Python实现判断一行代码是否为注释的方法
2018/05/23 Python
Pycharm连接gitlab实现过程图解
2020/09/01 Python
html5 桌面提醒:Notifycations应用介绍
2012/11/27 HTML / CSS
HTML5 CSS3实现一个精美VCD包装盒个性幻灯片案例
2014/06/16 HTML / CSS
声明struct x1 { . . . }; 和typedef struct { . . . }x2;有什么不同
2012/06/02 面试题
几个Shell Script面试题
2014/04/18 面试题
销售类个人求职信范文
2013/09/25 职场文书
我爱幼儿园演讲稿
2014/09/11 职场文书
政风行风评议工作总结
2014/10/21 职场文书
研讨会通知
2015/04/27 职场文书
学校安全管理制度
2015/08/06 职场文书
2015年街道办事处团委工作总结
2015/10/14 职场文书