suchen

Heim  >  Artikel  >  Web-Frontend  >  So implementieren Sie Ajax-Paging ohne Aktualisierung

So implementieren Sie Ajax-Paging ohne Aktualisierung

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

Dieses Mal zeige ich Ihnen, wie Sie Ajax-Paging ohne Aktualisierung implementieren und welche Vorsichtsmaßnahmen für die Implementierung von Ajax-Paging ohne Aktualisierung gelten. Hier sind praktische Fälle, werfen wir einen Blick darauf.

Im Anschluss an den vorherigen Artikel – Java+Oracle-Code zur Implementierung von Paging (2) zu den Prinzipien und der Implementierung der Paging-Technologie – wird in diesem Artikel weiterhin die Paging-Technologie analysiert. Im vorherigen Artikel ging es um die Code-Implementierung der Paging-Technologie. In diesem Artikel wird weiterhin die Effektsteuerung der Paging-Technologie analysiert.
Im vorherigen Artikel haben wir einfach ein Paging mithilfe von Code implementiert. Wir haben jedoch alle gesehen, dass die Ergebnismenge jedes Mal, wenn sie über eine Servlet-Anfrage im Code abgerufen wird, auf eine JSP-Seite umgeleitet wird, um die Ergebnisse anzuzeigen, sodass die Seite jedes Mal aktualisiert wird, wenn die Abfrage angezeigt wird. Nach dem Abfragen der Ergebnismenge und dem Anzeigen der dritten Seite wird die Seite aktualisiert. Der Effekt dieser Seite wird etwas unangenehm sein. Wir hoffen daher, dass die Seite nicht aktualisiert wird, sondern nur die Ergebnismenge geändert wird, unabhängig davon, auf welche Seite nach dem Abfragen der Ergebnismenge über Bedingungen zugegriffen wird. Um dieses Problem zu lösen, denke ich, dass jeder leicht an Ajax denken wird.
Ja, wir müssen Ajax bitten, herauszukommen. Nachdem die Ergebnismenge über die Abfragebedingungen abgefragt wurde, wird bei jedem weiteren Besuch einer Seite über Ajax auf asynchrones Ajax zugegriffen, und die Ergebnisse werden abgefragt und an Ajax zurückgegeben Änderungen, da Ajax die Ergebnisse zurückgibt und die Seite nicht aktualisiert wird, wodurch eine aktualisierungsfreie Paging-Technologie implementiert wird.
Sehen wir uns eine einfache Paging-Implementierung ohne Aktualisierung an. Der Code lautet wie folgt: 

<!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>

Dies ist eine sehr einfache Paging-Implementierung ohne Aktualisierung, die das JQuery+ jquery.pagination-Framework verwendet. Angesichts der zunehmenden Beliebtheit von Frameworks, insbesondere von JQuery, ist es sehr effektiv, Frameworks für die Entwicklung zu verwenden. Das obige Codeprinzip wurde im Code kommentiert. Sie können auch auf die offizielle Website von Jquery verweisen:.
Jetzt können wir unsere Ajax-Paging-Implementierung ohne Aktualisierung entwickeln. Basierend auf dem oben genannten Prinzip verwenden wir in pageselectCallback() im Code, der auf das Drücken der Seitenzahl reagiert, einen Ajax, um asynchron auf die Datenbank zuzugreifen, die Ergebnismenge über die angeklickte Seitenzahl herauszunehmen und sie dann auf die Seite festzulegen asynchron, sodass keine Aktualisierung durchgeführt werden kann.

Die Antwortfunktion pageselectCallback() beim Drücken der Seitenzahl wird wie folgt geändert:

Auf diese Weise können die Ergebnisse asynchron abgerufen werden und die Funktion showResponse wird zur Verarbeitung der Ergebnisse verwendet. Die showResponse-Funktion lautet wie folgt: 

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

Der obige Code wird verwendet, um die Ergebnisse im XML-Format zu verarbeiten, die nach der asynchronen Anforderung des Servlets über Ajax zurückgegeben werden. Der Servlet-Code befindet sich im vorherigen Artikel. Unter diesen sind itemList und pageList die Benutzerliste und die Seitennavigation, die nach dem Parsen bzw. Zurückgeben generiert werden, sodass Benutzer Daten auf ihre eigene Weise anzeigen können. 

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

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

So verwenden Sie das Rating-Steuerelement in AjaxToolKit

So implementieren Sie die jQuery+Ajax-Traversierung von JSON Daten

Das obige ist der detaillierte Inhalt vonSo implementieren Sie Ajax-Paging ohne Aktualisierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：JS verarbeitet URLsNächster Artikel：JS verarbeitet URLs

In Verbindung stehende Artikel

Mehr sehen