Home > Article > Web Front-end > How to implement Ajax paging without refreshing

How to implement Ajax paging without refreshing

php中世界最好的语言Original: 2018-04-04 13:37:351090browse

This time I will show you how to implement Ajax paging without refreshing, and what are the precautions to implement Ajax paging without refreshing. The following is a practical case, let's take a look.

Following the previous article - Java+Oracle code to implement paging (2) on the principles and implementation of paging technology, this article continues to analyze paging technology. The previous article talked about the code implementation of paging technology. This article continues to analyze the effect control of paging technology.

In the previous article, we have simply implemented a paging using code. But we have all seen that every time the result set is obtained through the servlet request in the code, it will be redirected to a jsp page to display the results, so that the page will be refreshed every time the query appears. For example, after querying the result set and looking at the third page, the page will be Will refresh it. The effect of this page will be a bit uncomfortable, so we hope that no matter which page is accessed after querying the result set through conditions, the page will not be refreshed, but only the result set will change. To solve this, I think everyone will easily think of Ajax.
Yes, we have to ask Ajax to come out. After the result set is queried through the query conditions, every subsequent visit to any page will be accessed through Ajax. Asynchronous Ajax is used to interact with the Servlet, and the results are queried and returned to Ajax. In this way, the page content changes because Ajax returns the results, and The page will not be refreshed, which implements refresh-free paging technology.
Let’s take a look at a simple non-refresh paging implementation. The code is as follows:

<!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=&#39;replace_word&#39; title="JavaScript知识库" target=&#39;_blank&#39; style=&#39;color:#df3434; font-weight:bold;&#39;>JavaScript</a>" src="../lib/<a href="http://lib.csdn.net/base/jquery" class=&#39;replace_word&#39; title="jQuery知识库" target=&#39;_blank&#39; style=&#39;color:#df3434; font-weight:bold;&#39;>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=&#39;replace_word&#39; title="Docker知识库" target=&#39;_blank&#39; style=&#39;color:#df3434; font-weight:bold;&#39;>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>

This is a very simple non-refresh paging implementation, using the JQuery+ jquery.pagination framework. Now with the popularity of frameworks, especially the popularity of Jquery, it is very effective to use frameworks for development. The above code principle has been commented in the code. You can also refer to Jquery's official website:.

Now we can develop our Ajax non-refresh paging implementation. Based on the above principle, in pageselectCallback() in the code that responds to the page number being pressed, we use an Ajax to asynchronously access the database, take out the result set through the clicked page number, and then set it to the page asynchronously, so that no refresh can be completed accomplish.

The response function pageselectCallback() when the page number is pressed is modified as follows:

In this way, the results can be obtained asynchronously and the showResponse function is used to process the results. The showResponse function is as follows:

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);
  }

The above code is used to process the results in XML format returned after asynchronously requesting the Servlet through Ajax. The Servlet code is in the previous article. Among them, itemList and pageList are the user List and paging navigation generated after parsing and returning respectively, so that users can display data in their own way.

function pageselectCallback(page_index, jq){
  var pars="pageNo="+(page_index+1);
   $.ajax({
    type: "POST",
   url: " UserBasicSearchServlet",
   cache: false,
   data: pars,
   success: showResponse
  });
    return false;
}

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

How to implement Ajax paging without refreshing

Related articles