AJAX 로 구현 되 는 새로 고침 없 는 페이지 구현 코드 (asp. net)

이전에 서버 가 되 돌아 온 데 이 터 는 모두 xml 형식 으로 클 라 이언 트 에 전 달 된 것 이 었 으 나 xml 가 같은 대상 에 게 전 달 된 데 이 터 는 매우 길 고 데이터 가 많 기 때문에 지금 은 json 으로 데 이 터 를 전 달 했 고 복잡 한 데 이 터 는 json, 간단 한 데 이 터 는 string 으로 바 뀌 었 다.모든 AJAX 의 x 는 원래 의 의 미 를 잃 었 다.
모두 가 알다 시 피 JQuery 는 Javascript 의 패 키 징 라 이브 러 리 입 니 다. 물론 JQuery 도 AJAX 에 대한 패 키 징 을 실 현 했 습 니 다. 여 기 는 페이지 를 JQuery 프레임 워 크 로 직접 사용 하 는 것 입 니 다. 비교적 간단 합 니 다.
먼저 원 리 를 말씀 드 리 겠 습 니 다. 페이지 에 두 가지 요점 이 있 습 니 다. 1. 몇 페이지 가 있 습 니까? 2. 페이지 마다 몇 개의 기록 이 있 습 니까?총 페이지 수 와 모든 페이지 데 이 터 는 서버 에서 되 돌아 와 야 합 니 다.그래서 저 희 는 먼저 일반적인 처리 프로그램 을 만 듭 니 다. PageService. ashx, 사용자 의 요청 을 처리 합 니 다.페이지 매개 변수 가 져 오기: GetPageCount, 페이지 데이터 매개 변 수 는 GetPagedData 와 PageNo 를 사용 합 니 다.다음은 일반 처리 프로그램 PageService. ashx 코드 입 니 다.
PageService.ashx

 
  
public void ProcessRequest(HttpContext context) 
  
{ 
  
context.Response.ContentType = "text/plain"; 
  
string action=context.Request["action"]; 
  
if (action == "GetPageCount") //            ，     。 
  
{ 
  
//          DataSet  ，          
  
int counts = new CommentTableAdapter().GetComentCount().Value; 
  
int page = counts / 10; //    10    
  
if (counts%10 != 0) 
  
{ 
  
page++; 
  
} 
  
context.Response.Write(page); //           。 
  
} 
  
else if (action == "GetPageData") //            ，           
  
{ 
  
int pageNo = Convert.ToInt32(context.Request["PageNo"]); 
  
//        ，               
  
var data = new CommentTableAdapter().GetPageData((pageNo-1)*10+1,pageNo*10); 
  
var p1 = data.Select( c =>new {c.name,c.Comment }); 
  
JavaScriptSerializer jss = new JavaScriptSerializer(); 
  
//      json          
  
context.Response.Write(jss.Serialize(p1)); 
  
} 
  
} 
  
 
 

다음은 htm 페이지 에 데 이 터 를 보 여 줍 니 다.
나 는 여기 서 단지 원 리 를 말 하기 때문에 미 공 방면 에 서 는 가혹 하 게 요구 하지 않 는 다.모든 페이지 의 데이터 가 하나의

안에 놓 여 있다 고 가정 하면 하나의 li 는 하나의 데 이 터 를 담 을 것 이다.페이지 번 호 는 하나의 table 에 놓 여 있 습 니 다. n 열 에 있 는 table 은 열 마다 페이지 가 있 습 니 다.
페이지 수:
다음은 JQuery 로 페이지 를 불 러 올 때 Comment 이라는 ul 과 pageno 라 는 table 에 데 이 터 를 초기 화 하 는 것 입 니 다.페이지 로 딩 기본 첫 페이지 데 이 터 를 표시 합 니 다.다음은 페이지. htm 페이지 를 새로 고침 하지 않 은 JQuery 코드 입 니 다.
페이지 새로 고침 없 음. htm

 
  
 
  <br>$(function(){ 
  <br>//----------------------------------------------------------- 
  <br>function getPageData(pageNo){ //          
  <br>$.post("PageService.ashx",{"action":"GetPageData","PageNo":pageNo},function(data,status){ 
  <br>if(status=="success"){ 
  <br>$("#Comment").empty(); 
  <br>var comments=$.parseJSON(data); //    json  。 
  <br>for(var i=0;i<comments.length;i++){ 
  <br>var row=comments[i]; 
  <br>var li= $("<li>"+row.name+" : "+row.Comment+"</li>"); 
  <br>$("#Comment").append(li); //            li append Comment/ul 。 
  <br>} 
  <br>} 
  <br>}); 
  <br>} 
  <br>//------------------------------------------------------------------- 
  <br>getPageData(1); //      ，           
  <br>//----------------------------------------------------------------/ 
  <br>//                 
  <br>$.post("PageService.ashx",{"action":"GetPageCount"},function(data,status){ 
  <br>if(status=="success"){ 
  <br>var tr1=$("<tr></tr>"); 
  <br>var pageNo=parseInt(data); 
  <br>for(var i=1;i<=pageNo;i++){ 
  <br>var td=$("<td><a href=''>"+i+"</a></td>"); 
  <br>tr1.append(td); 
  <br>} 
  <br>$("#pageNo").append(tr1); 
  <br>$("#pageNo a").click(function(e){ //     ，           click  。 
  <br>e.preventDefault(); //  a        
  <br>getPageData($(this).html()); //              。 
  <br>}); 
  <br>} 
  <br>}); 
  <br>//---------------------------------------------------------------------------- 
  <br>}); 
  <br> 
  
 
 

여러분 의 지적 을 환영 합 니 다. 감사합니다.