Home > Web Front-end > JS Tutorial > body text

Jquery之Ajax运用 学习运用篇_jquery

WBOY
Release: 2016-05-16 18:01:49
Original
742 people have browsed it

还是先说一些基础知识:
语法:$.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运用 学习运用篇_jquery
这里数据显示用的是Repeater控件,其中审核按钮为LinkButton服务器控件。

页面Html代码:

复制代码 代码如下:




rules="none">























选择

单号

状态

店铺

购买者

RMB

操作

" name="OrderId" value="" />





1号店铺

张三

100.00

审核



  





实现代码如下:
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 {
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 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{
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{
var newOrderIdArr = newOrderIdStr.split(',');
var positionArr = position.split(',');
$_Id("OrderId_"+newOrderIdArr[k]).disabled = "disabled";
if(parseInt(positionArr[k]){
$_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控件。
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!