還是先說一些基礎知識：

語法：$.ajax({option})

option表示參數。以key/value形式出現。

常用參數：type:post/get。

url:發(fā)送請求的地址。

data:{object:object} 發(fā)送到服務器的數據，必須為key/value格式?？梢栽O置processData屬性，不轉換數據格式。

success:function(msg){} 請求成功后回調函數。

error:function(msg){} 請求失敗后回調函數。

dataType:xml/html/script/json/jsonp 返回的數據類型。

再看實例理解：

1.用Ajax實現無刷新審核功能(點擊審核后，LinkButton不可用，并改為已審核)。界面如下：

這里數據顯示用的是Repeater控件，其中審核按鈕為LinkButton服務器控件。

頁面Html代碼：

rules="none">

選擇

單號

狀態(tài)

店鋪

購買者

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發(fā)送方式

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判斷事件的執(zhí)行。

protected void Page_Load(object sender, EventArgs e)

{

Conn.Open();

//執(zhí)行動作

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屬性,用于執(zhí)行頁面腳本代碼。

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控件，否則會引起回發(fā)。但在Repeater內部服務器控件也可以使用。

這里只需給input="btton"添加一個onclick屬性，直接執(zhí)行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屬性，執(zhí)行頁面腳本，單擊審核后，后臺的page_load事件根據Action選擇執(zhí)行的事件。

2.批量審核: 給批量審核按鈕加上onclick屬性，執(zhí)行Ajax腳本，后臺的page_load事件同樣根據Action選擇執(zhí)行的事件。批量審核按鈕必須為Html控件。

總結

以上是生活随笔為你收集整理的ajax能运用到app吗,Jquery之Ajax运用 学习运用篇的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。