jQuery 에 내 장 된 AJAX 기능 과 JSON 의 사용 사례

jQuery 에 내 장 된 AJAX 기능 을 통 해 배경 에 직접 방문 하여 JSON 형식의 데 이 터 를 얻 은 다음 jQuer 를 통 해 미리 설 계 된 html 템 플 릿 에 데 이 터 를 연결 하여 페이지 에 직접 표시 합 니 다.html 템 플 릿 을 먼저 살 펴 보 겠 습 니 다.

주문 ID
고객 ID
고용인 ID
주문 날짜
발송 일자
화주 명
화물 주 주소
화주 도시
더 많은 정보
반드시 주의해 야 할 것 은 안에 있 는 모든 id 속성 입 니 다. 이것 이 관건 입 니 다.AJAX 요청 과 데이터 바 인 딩 코드 를 다시 한 번 확인 해 보 겠 습 니 다.

$.ajax({
type: "get",//  get      
dataType: "json",//  json     
url: "BackHandler.ashx",//        
data: "pageIndex=" + pageIndex,//      
complete :function(){$("#load").hide();},//AJAX       loading  
success: function(msg){//msg      ，        
var data = msg.table;
$.each(data, function(i, n){
var row = $("#template").clone();
row.find("#OrderID").text(n.  ID);
row.find("#CustomerID").text(n.  ID);
row.find("#EmployeeID").text(n.  ID);
row.find("#OrderDate").text(ChangeDate(n.    ));
if(n.    !== undefined) row.find("#ShippedDate").text(ChangeDate(n.    ));
row.find("#ShippedName").text(n.    );
row.find("#ShippedAddress").text(n.    );
row.find("#ShippedCity").text(n.    );
row.find("#more").html(" More"); 
row.attr("id","ready");//          id
row.appendTo("#datas");//         
});

이것 은 jQuery 의 AJAX 방법 입 니 다. 데 이 터 를 되 돌려 주 는 것 은 복잡 하지 않 습 니 다. 주로 데 이 터 를 템 플 릿 의 정의 에 따라 페이지 에 표시 하 는 방법 을 설명 합 니 다.먼저 이 "var row = $(" \ # template "). clone ();" 템 플 릿 을 복사 한 다음 row. find ("\ # Orderind ID"). text (n. 주문 ID);id = OrderID 를 찾 은 표 시 를 표시 합 니 다. innerText 를 해당 하 는 데이터 로 설정 하고 html 형식의 데이터 로 설정 할 수 있 습 니 다.또는 외부 함 수 를 통 해 데 이 터 를 필요 한 형식 으로 변환 합 니 다. 예 를 들 어 여기 row. find ("\ # OrderDate"). text (ChangeDate (n. 주문 날짜);서버 컨트롤 이 템 플 릿 으로 데 이 터 를 연결 하 는 느낌 이 듭 니 다.이 모든 것 은 정적 페이지 에 놓 여 있 습 니 다. AJAX 방법 으로 배경 에서 만 데 이 터 를 얻 을 수 있 습 니 다. 모든 html 코드 는 다음 과 같 습 니 다.

 




 



  ID

  ID

  ID

    

    

    

    

    

    
























LOADING....

PageData. js 는 위 에 있 는 AJAX 요청 과 데이터 코드 를 연결 하 는 js 입 니 다. 전체 페이지 는 form 도 사용 하지 않 습 니 다. 이렇게 하면 무슨 좋 은 점 이 있 습 니까?다음 템 플 릿 을 보 겠 습 니 다.

fsdfasdf
id 속성 을 주의해 야 합 니 다.보시 다시 피 어떤 표현 형식 으로 든 id 속성 이 같 으 면 데 이 터 를 대응 하 는 위치 에 연결 할 수 있 습 니 다.이렇게 되면 우리 가 프로그램 을 하 는 사람들 은 미 공의 수정 으로 인해 코드 를 수정 하지 않 을 것 이다. 그리고 미 공 도 html 만 만 만 들 면 된다. 서버 컨트롤 을 위해 템 플 릿 을 만 들 필요 가 없다. (그러나 나 는 아직 이런 미 공 을 만난 적 이 없다. 모두 미 공 들 이 내 가 서버 컨트롤 의 템 플 릿 으로 바 꾸 었 다.)
AJAX 가 요청 한 백 엔 드 는 Access 의 Northwind 데이터 베 이 스 를 사용 하여 주문 서 를 DataTable 에 넣 고 DataTable 2JSON 을 통 해 JSON 데이터 형식 으로 전송 하면 되 지만 백 엔 드 는 페이지 와 캐 시 방법 을 사용 하여 초보 자 에 게 도움 이 되 기 를 바 랍 니 다.