Home  >  Article  >  Web Front-end  >  Ajax Application of Jquery Learning and Application_jquery

Ajax Application of Jquery Learning and Application_jquery

WBOY
WBOYOriginal
2016-05-16 18:01:49869browse

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:
Ajax Application of Jquery Learning and Application_jquery
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










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 컨트롤이어야 합니다.
Statement:
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