Ajax Application of Jquery Learning and Application_jquery

Let’s talk about some basic knowledge first:
Syntax: $.ajax({option})
option represents parameters. Appears in the form of key/value.
Common parameters: type:post/get.
URL: The address to send the request.
Data:{object:object} The data sent to the server must be in key/value format. The processData attribute can be set without converting the data format.
Success:function(msg){} Callback function after the request is successful.
　　error:function(msg){} Callback function after the request fails.
DataType:xml/html/script/json/jsonp The data type returned.
Look at the example to understand:
1. Use Ajax to implement the non-refresh audit function (after clicking the audit, the LinkButton is unavailable and changed to audited).
The interface is as follows:

The data display here uses the Repeater control, and the review button is the LinkButton server control.

Page Html code:

Copy code The code is as follows:

< body>

rules="none">














;/td>

Select	Order number	Status	Store	Buyer	RMB	Operation
" name="OrderId" value="<%#Eval("OrderId") %>" />	<%#Eval("OrderId") %>	<%# Eval("oState").ToString () %> <🎜	100.00	Review

Select all/Invert selection

The implementation code is as follows:
a. Script code:

Copy code


The code is as follows:

function lbtn_Audit_eShop_Price_Command(obj,orderId) { if (obj.innerHTML != "Audit") return false; if (!confirm("Are you sure you want to audit? ")) { return false;

}

$.ajax({
type: "post", //Post sending method
url: "AjaxTest.aspx", // request The address is the address of this page
data:{OrderId:orderId,Action:"Single_Review"}, //The incoming data is the order number and Action
success:(function(msg){
if(msg! ="")
{
var chkId = "OrderId_" orderId;
document.getElementById(chkId).disabled = "disabled";
obj.disabled = "disabled";
obj .innerHTML = "Reviewed";
}
})
});
return false;
}


b. Server code:
Determine the execution of the event based on the Action.

protected void Page_Load(객체 전송자, 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") //검토하려면 클릭
{
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]
//Batch review
function Batch_Review()
{
if(!checkSelItem("OrderId","Please) 주문 선택!") ) 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 요소[ m].value;
}
else
{
OrderIds = OrderIds 요소[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 ","; }
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. 분할(',');
$_Id("OrderId_" newOrderIdArr[k]).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 = "비활성화됨" ";
}
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;
}
//interception String, substring(start,stop); 반환된 결과에는 마지막 숫자가 포함되지 않습니다.
str = str.substring(0,i 1); 🎜>}


이제 예시 설명을 마치겠습니다.
최종 검토 아이디어:
1. 단일 감사: 페이지가 초기화되면 감사 버튼에 onclick 속성을 추가하고 감사를 클릭한 후 백그라운드의 page_load 이벤트가 해당 이벤트를 선택합니다. Action을 기반으로 실행됩니다.
2. 일괄 감사: 일괄 감사 버튼에 onclick 속성을 추가하고 백그라운드의 page_load 이벤트도 Action에 따라 실행될 이벤트를 선택합니다. 일괄 검토 버튼은 HTML 컨트롤이어야 합니다.