AJAX(asp.net)를 사용하여 새로 고치지 않고 페이징 구현 코드

이전에는 서버에서 반환하는 데이터를 xml 형식으로 클라이언트에 전송했습니다. 하지만 xml로 전송하는 클래스 객체의 데이터는 매우 길고 트래픽도 크기 때문에 이제는 json을 사용하여 전송합니다. 복잡한 데이터인 json의 경우 단순 데이터는 문자열을 사용합니다. 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에는 하나의 데이터가 포함되어 있다고 가정합니다. 페이지 번호는 1개의 행과 n개의 열로 구성된 테이블에 표시되며 각 열은 페이지입니다.
6c04bd5ca3fcae76e30b72ad730ca86d
0487e7f5179174e850cddfadc235f0d1929d1f5ca49e04fdcb27f9465b944689df250b2156c434f3390392d09b1c9563
페이지 수:
8594430586b0fc80a028218893944e4a
36cc49f0c466276486e50c850b7e4956
다음 단계는 페이지가 로드될 때 JQuery를 사용하여 Comment ul 및 pageNo 테이블에 대한 데이터를 초기화하는 것입니다. 페이지 로딩은 기본적으로 데이터의 첫 번째 페이지를 표시합니다. 다음은 다음과 같습니다. no-refresh paging.htm 페이지에 대한 JQuery 코드:
No-refresh paging.htm

<script type="text/javascript"> 
$(function(){ 
//----------------------------------------------------------- 
function getPageData(pageNo){ //取得某页数据的方法 
$.post("PageService.ashx",{"action":"GetPageData","PageNo":pageNo},function(data,status){ 
if(status=="success"){ 
$("#Comment").empty(); 
var comments=$.parseJSON(data); //反序列化json数据。 
for(var i=0;i<comments.length;i++){ 
var row=comments[i]; 
var li= $("<li>"+row.name+" : "+row.Comment+"</li>"); 
$("#Comment").append(li); //每取出一条数据就创建一个li并append到Comment/ul内。 
} 
} 
}); 
} 
//------------------------------------------------------------------- 
getPageData(1); //首次进入页面，看到的是第一页的数据 
//----------------------------------------------------------------/ 
//取得所有的页数并且初始化分页按钮 
$.post("PageService.ashx",{"action":"GetPageCount"},function(data,status){ 
if(status=="success"){ 
var tr1=$("<tr></tr>"); 
var pageNo=parseInt(data); 
for(var i=1;i<=pageNo;i++){ 
var td=$("<td><a href=&#39;&#39;>"+i+"</a></td>"); 
tr1.append(td); 
} 
$("#pageNo").append(tr1); 
$("#pageNo a").click(function(e){ //页码创建后，就为每一个页码监听一个click事件。 
e.preventDefault(); //取消a的默认跳转行为 
getPageData($(this).html()); //点击后就去执行取页数据的操作。 
}); 
} 
}); 
//---------------------------------------------------------------------------- 
}); 
</script>

AJAX(asp.net)를 사용하는 추가 새로 고침이 없는 페이징 구현 코드 관련 기사 , Follow PHP 중국어 웹사이트를 방문해 주세요!