AJAX 페이지 코드(배경 asp.net)

ASP.NET 에는 가장 많이 사용 되 는 GridView 와 같은 데이터 가 많이 나타 나 는 컨트롤 도 있 고 페이지 를 나 누 는 기능 도 가지 고 있 습 니 다.그러나 우 리 는 GridView 로 데 이 터 를 표시 하 는 것 을 알 고 있 습 니 다.ViewState 를 사용 하지 않 으 면 페이지 의 크기 가 매우 클 것 입 니 다.그리고 평소에 우 리 는 첫 페이지,다음 페이지,이전 페이지,마지막 페이지 등 기능 을 클릭 하면 페이지 의 리 턴 을 일 으 킬 수 있다.즉,서버 와 완전히 상호작용 을 해 야 하고 이리 저리 응답 하 는 시간,전송 하 는 데 이 터 량 이 매우 크다.AJAX 의 페이지 는 이 문제 들 을 잘 해결 할 수 있다.개발 의 나 쁜 경 지 는 jQuery AJAX+Northwind 다.구체 적 인 절차:SearchCustomer.aspx:

 
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> 
<script type="text/javascript"> 
var pageIndex = 0; 
var pageSize = 10; 
$(function () { 
$("#btnSearch").click(function () { 
/* 
name      ,           
0      1  
10       
*/ 
var name = $("#txtSearch").val(); 
pageIndex = 0; 
AjaxGetData(name, pageIndex, pageSize); 
}); 
}); 
function AjaxGetData(name, index, size) { 
$.ajax({ 
url: "jQueryPaging.aspx", 
type: "Get", 
data: "Name=" + name + "&PageIndex=" + index + "&PageSize=" + size, 
dataType: "json", 
success: function (data) { 
var htmlStr = ""; 
htmlStr += "<table>" 
htmlStr += "<thead>" 
htmlStr += "<tr><td>CustomerID</td><td>CompanyName</td><td>ContactName</td><td>ContactTitle</td><td>Address</td><td>City</td></tr>" 
htmlStr += "</thead>"; 
htmlStr += "<tbody>" 
for (var i = 0; i < data.Customers.length; i++) { 
htmlStr += "<tr>"; 
htmlStr += "<td>" + data.Customers[i].CustomerID + "</td>" 
+ "<td>" + data.Customers[i].CompanyName + "</td>" 
+ "<td>" + data.Customers[i].ContactName + "</td>" 
+ "<td>" + data.Customers[i].ContactTitle + "</td>" 
+ "<td>" + data.Customers[i].Address + "</td>" 
+ "<td>" + data.Customers[i].City + "</td>" 
htmlStr += "</tr>"; 
} 
htmlStr += "</tbody>"; 
htmlStr += "<tfoot>"; 
htmlStr += "<tr>"; 
htmlStr += "<td colspan='6'>"; 
htmlStr += "<span>    " + data.Count + "; <span id='count'>" + (data.Count % 10 == 0 ? parseInt(data.Count / 10) : parseInt(data.Count / 10 + 1)) + "</span> " + "</span>"; 
htmlStr += "<a href='javascript:void' onclick='GoToFirstPage()' id='aFirstPage' >   </a>&nbsp;&nbsp; "; 
htmlStr += "<a href='javascript:void' onclick='GoToPrePage()' id='aPrePage' >   </a>&nbsp;&nbsp; "; 
htmlStr += "<a href='javascript:void' onclick='GoToNextPage()' id='aNextPage'>   </a>&nbsp;&nbsp; "; 
htmlStr += "<a href='javascript:void' onclick='GoToEndPage()' id='aEndPage' >   </a>&nbsp;&nbsp; "; 
htmlStr += "<input type='text' /><input type='button' value='  ' onclick='GoToAppointPage(this)' /> "; 
htmlStr += "</td>"; 
htmlStr += "</tr>"; 
htmlStr += "</tfoot>"; 
htmlStr += "</table>"; 
$("#divSearchResult").html(htmlStr); 
}, 
error: function (XMLHttpRequest, textStatus, errorThrown) { 
alert(XMLHttpRequest); 
alert(textStatus); 
alert(errorThrown); 
} 
}); 
} 
//   
function GoToFirstPage() { 
pageIndex = 0; 
AjaxGetData($("#txtSearch").val(), pageIndex, pageSize); 
} 
//    
function GoToPrePage() { 
pageIndex -= 1; 
pageIndex = pageIndex >= 0 ? pageIndex : 0; 
AjaxGetData($("#txtSearch").val(), pageIndex, pageSize); 
} 
//    
function GoToNextPage() { 
if (pageIndex + 1 < parseInt($("#count").text())) { 
pageIndex += 1; 
} 
AjaxGetData($("#txtSearch").val(), pageIndex, pageSize); 
} 
//   
function GoToEndPage() { 
pageIndex = parseInt($("#count").text()) - 1; 
AjaxGetData($("#txtSearch").val(), pageIndex, pageSize); 
} 
//   
function GoToAppointPage(e) { 
var page = $(e).prev().val(); 
if (isNaN(page)) { 
alert("     !"); 
} 
else { 
var tempPageIndex = pageIndex; 
pageIndex = parseInt($(e).prev().val())-1; 
if (pageIndex < 0 || pageIndex >= parseInt($("#count").text())) { 
pageIndex = tempPageIndex; 
alert("          !"); 
} 
else { 
AjaxGetData($("#txtSearch").val(), pageIndex, pageSize); 
} 
} 
} 
</script> 

데이터 전송 용 JSON 형식.JSON 이 경 량 급 데이터 전송 인 거 아 시 잖 아 요.프론트 데스크 의 연출 에 사용 되 는 table.이렇게 생 성 된 HTML 코드 는 매우 간결 하 다.HTML 은 다음 과 같다.이 버 전의 많은 기능 점 은 모두 고려 하지 않 은 것 이 고 단지 예시 일 뿐 이 며 여러분 은 자신의 실제 프로젝트 에서 이상 의 기능 을 수정 하여 자신의 수 요 를 만족 시 킬 수 있 습 니 다.