Jquery 학습 및 Application_jquery의 Ajax 응용 프로그램

먼저 몇 가지 기본 지식에 대해 이야기해 보겠습니다.
구문: $.ajax({option})
option은 매개변수를 나타냅니다. 키/값의 형태로 나타납니다.
공통 매개변수: 유형:post/get.
URL: 요청을 보낼 주소입니다.
데이터:{object:object} 서버로 전송되는 데이터는 키/값 형식이어야 합니다. 데이터 형식을 변환하지 않고도 processData 속성을 설정할 수 있습니다.
성공:function(msg){} 요청 성공 후 콜백 함수입니다.
　　error:function(msg){} 요청 실패 후 콜백 함수입니다.
DataType:xml/html/script/json/jsonp 반환된 데이터 유형입니다.
이해하려면 예를 살펴보세요.
1. Ajax를 사용하여 새로 고치지 않는 감사 기능을 구현합니다(감사를 클릭하면 LinkButton을 사용할 수 없으며 감사로 변경됩니다).
인터페이스는 다음과 같습니다.

여기의 데이터 표시는 Repeater 컨트롤을 사용하고 검토 버튼은 LinkButton 서버 컨트롤입니다.

페이지 HTML 코드:

코드 복사 코드는 다음과 같습니다.

rules="none">








;tr onmouseover="this.className='Main_List_Table_Tr_Over'" onmouseout="this.className='Main_List_Table_Tr_Out'">

<%#Eval("OrderId") %>

<%# Eval("oState") .ToString () %>
asp:LinkButton ID="lbtn_Audit_eShop_Price" runat="server"> 검토

;/asp:Repeater>

모두 선택/선택 반전< /label>
/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"}, //들어오는 데이터는 주문 번호와 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(객체 전송자, 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 컨트롤이어야 합니다.

	주문 번호	상태	매장	구매자	RMB	작업
" name="OrderId" value="<%#Eval("OrderId") %>" />