새로 고치지 않고 Ajax 페이징을 구현하는 방법
- php中世界最好的语言원래의
- 2018-04-04 13:37:351103검색
이번에는 새로 고침 없이 Ajax 페이징을 구현하는 방법을 알려드리겠습니다. Ajax 페이징을 새로 고치지 않고 구현할 때 주의사항은 무엇인지 살펴보겠습니다.
이전 글 - 페이징 구현을 위한 Java+Oracle 코드(2) 페이징 기술의 원리와 구현에 이어 이번 글에서는 페이징 기술에 대한 분석을 이어갑니다. 이전 기사에서는 페이징 기술의 코드 구현에 대해 설명했습니다. 이 기사에서는 페이징 기술의 효과 제어를 계속 분석합니다.
이전 글에서는 간단하게 코드를 이용하여 페이징을 구현해봤습니다. 그러나 우리는 코드의 서블릿 요청을 통해 결과 세트를 얻을 때마다 결과를 표시하기 위해 jsp 페이지로 리디렉션되어 쿼리가 나타날 때마다 페이지가 새로 고쳐지는 것을 모두 확인했습니다. 결과 집합을 쿼리하고 세 번째 페이지를 본 후 페이지를 새로 고칩니다. 이 페이지의 효과는 다소 불편할 것이므로 조건을 통해 결과 집합을 쿼리한 후 어떤 페이지에 접속하더라도 페이지가 새로 고쳐지지 않고 결과 집합만 변경되기를 바랍니다. 이를 해결하기 위해 누구나 쉽게 Ajax를 떠올릴 것이라고 생각합니다.
네, 에이잭스한테 나오라고 해야죠. 쿼리 조건을 통해 결과 집합을 쿼리한 후 이후의 모든 페이지 방문은 Ajax를 통해 액세스됩니다. 비동기 Ajax는 Servlet과 상호 작용하는 데 사용되며 결과는 쿼리되어 Ajax에 반환됩니다. Ajax가 결과를 반환하기 때문에 변경되고 페이지가 새로 고쳐지지 않으며 새로 고침 없는 페이징 기술을 구현합니다.
새로 고치지 않는 간단한 페이징 구현을 살펴보겠습니다. 코드는 다음과 같습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="../lib/jquery_pagination/pagination.css" mce_href="lib/jquery_pagination/pagination.css" />
<mce:script type="text/<a href="http://lib.csdn.net/base/javascript" class='replace_word' title="JavaScript知识库" target='_blank' style='color:#df3434; font-weight:bold;'>JavaScript</a>" src="../lib/<a href="http://lib.csdn.net/base/jquery" class='replace_word' title="jQuery知识库" target='_blank' style='color:#df3434; font-weight:bold;'>jQuery</a>/jquery.min.js" mce_src="lib/jquery/jquery.min.js"></mce:script>
<mce:script type="text/javascript"
src="../lib/jquery_pagination/jquery.pagination.js"></mce:script>
<mce:script type="text/javascript"><!--
/**
* Callback function that displays the content.
*
* Gets called every time the user clicks on a pagination link.
*
* @param {int}page_index New Page index
* @param {jQuery} jq the <a href="http://lib.csdn.net/base/docker" class='replace_word' title="Docker知识库" target='_blank' style='color:#df3434; font-weight:bold;'>Container</a> with the pagination links as a jQuery object
*/
function pageselectCallback(page_index, jq) {
var new_content = $('#hiddenresult p.result:eq(' + page_index + ')')
.clone();
$('#Searchresult').empty().append(new_content);
return false;
}
function initPagination() {
var num_entries = $('#hiddenresult p.result').length;
// Create pagination element
$("#Pagination").pagination(num_entries, {
num_edge_entries : 2,
num_display_entries : 8,
callback : pageselectCallback,
items_per_page : 1
});
}
// When the HTML has loaded, call initPagination to paginate the elements
$(document).ready(function() {
initPagination();
});
// --></mce:script>
<mce:style type="text/css"><!--
* {
padding: 0;
margin: 0;
}
body {
background-color: #fff;
margin: 20px;
padding: 0;
height: 100%;
font-family: Arial, Helvetica, sans-serif;
}
#Searchresult {
margin-top: 15px;
margin-bottom: 15px;
border: solid 1px #eef;
padding: 5px;
background: #eef;
width: 40%;
}
#Searchresult p {
margin-bottom: 1.4em;
}
--></mce:style><style type="text/css" mce_bogus="1">* {
padding: 0;
margin: 0;
}
body {
background-color: #fff;
margin: 20px;
padding: 0;
height: 100%;
font-family: Arial, Helvetica, sans-serif;
}
#Searchresult {
margin-top: 15px;
margin-bottom: 15px;
border: solid 1px #eef;
padding: 5px;
background: #eef;
width: 40%;
}
#Searchresult p {
margin-bottom: 1.4em;
}</style>
<title>Pagination</title>
</head>
<body>
<h4>
jQuery Pagination Plugin Demo
</h4>
<p id="Pagination" class="pagination">
</p>
<br style="clear: both;" mce_style="clear: both;" />
<p id="Searchresult">
This content will be replaced when pagination inits.
</p>
<p id="hiddenresult" style="display: none;" mce_style="display: none;">
<p class="result">
<p>
Globally maximize granular "outside the box" thinking vis-a-vis
quality niches. Proactively formulate 24/7 results whereas 2.0
catalysts for change. Professionally implement 24/365 niches rather
than client-focused users.
</p>
<p>
Competently engineer high-payoff "outside the box" thinking through
cross functional benefits. Proactively transition intermandated
processes through open-source niches. Progressively engage
maintainable innovation and extensible interfaces.
</p>
</p>
<p class="result">
<p>
Credibly fabricate e-business models for end-to-end niches.
Compellingly disseminate integrated e-markets without ubiquitous
services. Credibly create equity invested channels with
multidisciplinary human capital.
</p>
<p>
Interactively integrate competitive users rather than fully tested
infomediaries. Seamlessly initiate premium functionalities rather
than impactful architectures. Rapidiously leverage existing
resource-leveling processes via user-centric portals.
</p>
</p>
<p class="result">
<p>
Monotonectally initiate unique e-services vis-a-vis client-centric
deliverables. Quickly impact parallel opportunities with B2B
bandwidth. Synergistically streamline client-focused
infrastructures rather than B2C e-commerce.
</p>
<p>
Phosfluorescently fabricate 24/365 e-business through 24/365 total
linkage. Completely facilitate high-quality systems without
stand-alone strategic theme areas.
</p>
</p>
</p>
</body>
</html>
이것은 JQuery+ jquery.pagination 프레임워크를 사용하는 매우 간단한 새로 고치지 않는 페이징 구현입니다. 이제 프레임워크의 인기, 특히 Jquery의 인기로 인해 개발에 프레임워크를 사용하는 것이 매우 효과적입니다. 위의 코드 원칙은 코드에 설명되어 있습니다. Jquery의 공식 웹사이트를 참조할 수도 있습니다.
이제 Ajax 새로 고치지 않는 페이징 구현을 개발할 수 있습니다. 위의 원칙을 바탕으로 페이지 번호가 눌렸을 때 응답하는 코드 중 pageselectCallback()에서 Ajax를 이용하여 비동기적으로 데이터베이스에 접근하고, 클릭한 페이지 번호를 통해 결과셋을 꺼내어 페이지에 설정한다. 비동기식으로 수행되므로 새로 고침이 완료될 수 없습니다.
페이지 번호를 눌렀을 때 응답 함수인 pageselectCallback()을 다음과 같이 수정합니다.
이렇게 하면 결과를 비동기적으로 얻을 수 있으며, showResponse 함수를 사용하여 결과를 처리합니다.
function showResponse(request){
var content = request;
var root = content.documentElement;
var responseNodes = root.getElementsByTagName("root");
var itemList = new Array();
var pageList=new Array();
alert(responseNodes.length);
if (responseNodes.length > 0) {
var responseNode = responseNodes[0];
var itemNodes = responseNode.getElementsByTagName("data");
for (var i=0; i<itemNodes.length; i++) {
var idNodes = itemNodes[i].getElementsByTagName("id");
var nameNodes = itemNodes[i].getElementsByTagName("name");
var sexNodes=itemNodes[i].getElementsByTagName("sex");
var ageNodes=itemNodes[i].getElementsByTagName("age");
if (idNodes.length > 0 && nameNodes.length > 0&&sexNodes.length > 0&& ageNodes.length > 0) {
var id=idNodes[0].firstChild.nodeValue;
var name = nameNodes[0].firstChild.nodeValue;
var sex = sexNodes[0].firstChild.nodeValue;
var age=ageNodes[0].firstChild.nodeValue;
itemList.push(new Array(id,name, sex,age));
}
}
var pageNodes = responseNode.getElementsByTagName("pagination");
if (pageNodes.length>0) {
var totalNodes = pageNodes[0].getElementsByTagName("total");
var startNodes = pageNodes[0].getElementsByTagName("start");
var endNodes=pageNodes[0].getElementsByTagName("end");
var currentNodes=pageNodes[0].getElementsByTagName("pageno");
if (totalNodes.length > 0 && startNodes.length > 0&&endNodes.length > 0) {
var total=totalNodes[0].firstChild.nodeValue;
var start = startNodes[0].firstChild.nodeValue;
var end = endNodes[0].firstChild.nodeValue;
var current=currentNodes[0].firstChild.nodeValue;
pageList.push(new Array(total,start,end,current));
}
}
}
showTable(itemList,pageList);
}
위 코드는 Ajax를 통해 비동기 처리를 처리하는 데 사용됩니다. Servlet을 요청한 후 반환되는 XML 형식의 결과입니다. 그 중 Servlet 코드는 이전 기사에 나와 있습니다. 그 중 itemList와 pageList는 각각 파싱하고 리턴한 후 생성된 사용자 List와 페이징 네비게이션으로, 사용자가 원하는 방식으로 데이터를 표시할 수 있다.
function pageselectCallback(page_index, jq){
var pars="pageNo="+(page_index+1);
$.ajax({
type: "POST",
url: " UserBasicSearchServlet",
cache: false,
data: pars,
success: showResponse
});
return false;
}
이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 자료:
JQuery+ajax를 구현하여 json 데이터를 탐색하는 방법
위 내용은 새로 고치지 않고 Ajax 페이징을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!