ajax能运用到app吗,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代码：

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 < 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

{

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])<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控件。