Jquery学習とApplication_jqueryのAjaxアプリケーション-jsチュートリアル-php.cn

Jquery学習とApplication_jqueryのAjaxアプリケーション

WBOY

リリース： 2016-05-16 18:01:49

オリジナル

869 人が閲覧しました

まず基本的な知識について話しましょう:
構文: $.ajax({option})
option はパラメーターを表します。キー/値の形式で表示されます。
共通パラメータ: type:post/get。
URL: リクエストを送信するアドレス。
データ:{オブジェクト:オブジェクト} サーバーに送信されるデータは、キー/値形式である必要があります。 processData属性は、データ形式を変換せずに設定できます。
Success:function(msg){} リクエストが成功した後のコールバック関数。
error:function(msg){} リクエストが失敗した後のコールバック関数。
DataType:xml/html/script/json/jsonp 返されるデータ型。
例を見て理解してください:
1. Ajax を使用して非更新監査機能を実装します (監査をクリックすると、LinkButton が使用できなくなり、監査済みに変わります)。
インターフェイスは次のとおりです。
Jquery学習とApplication_jqueryのAjaxアプリケーション
ここでのデータ表示は、Repeater コントロールを使用し、レビューボタンは LinkButton サーバーコントロールです。

ページの HTML コード:

コードをコピーコードは次のとおりです:

<本文>

<表幅="100%" セル間隔=" 0" cellpadding ="0" class="Main_List_Table"
rules="none">

ステータス

ストア
%"> ;
購入者

人民元

オペレーション

;tr onmouseover="this.className='Main_List_Table_Tr_Over'" onmouseout="this.className='Main_List_Table_Tr_Out'">
" name="OrderId" value="<%#Eval("OrderId") %>" />

<%#Eval("OrderId") %>

<%# Eval("oState") .ToString () %>

asp:LinkButton ID="lbtn_Audit_eShop_Price" runat="server">

すべて選択/選択を反転< /label>input type="button" id="btn_Batch_Review" onclick="return Batch_Review();" value="バッチレビュー" /> /form>

実装コードは次のとおりです:
a. スクリプトコード:

コードをコピーします

コードは次のとおりです。

function lbtn_Audit_eShop_Price_Command(obj,orderId)
{
if (obj.innerHTML != "Audit") ) return false;
if (!confirm("監査してもよろしいですか? ")) {
return false;
}
$.ajax({
type: "post", //ポスト送信メソッド
url: "AjaxTest.aspx", // リクエストアドレスはこのページのアドレスです
data:{OrderId:orderId,Action:"Single_Review"}, //受信データは注文番号とアクションです
success:(function(msg){

if(msg! ="")
{
var chkId = "OrderId_" orderId;
document.getElementById(chkId).disabled = "無効";

obj.disabled = "無効"; obj .innerHTML = "レビュー済み"; } }) }); return false;

b.
アクションに基づいてイベントの実行を決定します。

 
protected void Page_Load(object sender, EventArgs e) 
{ 
Conn.Open(); 
//Execute action
string Action = CommFun.Get_Safe_Str(Request["Action "]); 
if (!IsPostBack) 
{ 
if (Action == "") 
{ 
rpt_Pro_Order_List_Bind(); 
} 
else if (Action = = "Single_Review") //Click to review 
{ 
lbtn_Audit_eShop_Price_Command(); 
} 
else //Click to review in batches 
{ 
btn_Batch_Review_eShop_Price(); 
} 
} 
} 

After the Repeater binds the data, add the onclick attribute to the LinkButton to execute the page script code.

Copy code The code is as follows:

 
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 = "Audited"; 
} 
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. Use Ajax to implement batch review without refreshing. 
Note: The control used here must be an Html control, otherwise it will cause a postback. But server controls can also be used inside Repeater. 
Here you only need to add an onclick attribute to input="btton" and execute the Ajax script directly. 
The content of the script is as follows: 
[code] 
//Batch review
function Batch_Review() 
{ 
if(!checkSelItem("OrderId","Please select an order!") ) return false; 
if(!confirm("Are you sure you want to review?")) return false; 
var OrderIds = ""; //Record all order numbers
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;//Record the number of selected orders
var position = "";//Record the selected order position
 for(var i = 0;i{ 
var chk_Id = "OrderId_" orderIdArr[i]; 
if($_Id(chk_Id).checked)//Record selected order
{ 
if(i == orderIdArr.length - 1) 
{ 
newOrderIdStr = orderIdArr[i]; 
position = i; 
} 
else 
{ 
newOrderIdStr = orderIdArr[i] ","; 
position = i ","; 
} 
j ; 
} 
} 
newOrderIdStr = RemoveRightComma( newOrderIdStr);//The order number after removing the last comma
position = RemoveRightComma(position);//The position after removing the last comma
$.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 = "Audited"; 
$_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 = "Audited"; 
$_Id("rpt_Review_ctl" parseInt(positionArr[k]) " _lbtn_Audit_eShop_Price").disabled = "disabled"; 
} 
} 
} 
} 
}) 
return true; 
} 
//Remove the right comma
function RemoveRightComma(str) 
{ 
if(str == "") return; 
var i; 
for(i = str.length-1;i>=0;i- -) 
{ 
//charAt(i) takes the character at a certain position 
if(str.charAt(i) != ",") break; 
} 
//interception String, substring(start,stop); The returned result does not include the last digit 
str = str.substring(0,i 1); 
return str; 
} 

This concludes the example explanation.
Final review ideas:
1. Single audit: When the page is initialized, add the onclick attribute to the audit button and execute the page script. After clicking the audit, the page_load event in the background selects the event to be executed based on the Action.
2. Batch audit: Add the onclick attribute to the batch audit button and execute the Ajax script. The page_load event in the background also selects the event to be executed based on the Action. Batch review buttons must be Html controls.