Example code to explain the implementation of Ajax no refresh paging

Time:2020-10-25

1. The advantages of Ajax without refreshing the page: it provides a good customer experience, obtains data from the database and displays it in the background through Ajax, and eliminates the blank state of waiting for the page to be loaded;

2. So, AJAX no refresh page is running in dynamic page (. PHP)? Or a static page (. HTML /. HTM /. Shtml)? The answer is: static pages;

3. Implementation principle: through the combination of front-end JS script and Ajax, the data returned from the dynamic page is obtained and displayed.

Now everything pays attention to a no refresh, even pagination is the same, the following is a small daily collation of a piece of no refresh code, I hope to help you.

The code is as follows:

1、 HTML code part:

<table> 
 <thead> 
  <tr> 
   < th > serial number < / th > 
   < th > Title < / th > 
   < th > location < / th > 
   < th > registered < / th > 
   < th > category < / th > 
   < th > operation 
  </tr> 
</thead> 
<tbody> 
<! -- Ajax fills the list -- >
</tbody> 
</table> 
< button > Home Page 
< button > previous page 
< button > next page 
< button > last page

2、 Ajax code part:

Var PageSize = "10"; // rows per page 
Var CurrentPage = "1"; // current page 
Var totalpage = "0"; // total pages 
Var rowcount = "0"; // total number 
Var params =; // parameters 
var url="activity_list.action";//action 
The $(document). Ready (function() {// jQuery code is loaded as the document is loaded 
 //Paging query 
 function queryForPages()
 { 
  $.ajax({ 
   url:url, 
   type:'post', 
   dataType:'json', 
   data:"qo.currentPage="+currentPage+"&qo.pageSize="+pageSize+params, 
   success:function callbackFun(data)
   { 
    //Parsing JSON 
    var info = eval("("+data+")"); 
    //Clear data 
    clearDate(); 
    fillTable(info); 
   } 
  }); 
 } 
 //Fill in the data 
 function fillTable(info)
 { 
  if(info.length>1)
  { 
   totalPage=info[info.length-1].totalPage; 
   var tbody_ Content =; // if the string "" is not initialized, it will default to "undefined" 
   for(var i=0;i<info.length-1;i++)
   { 
    tbody_content +="<tr>" 
    +"< TD data title ='sequence number '>" + (I + 1 + (currentPage-1) * PageSize) + "< / td >" 
    +"< TD data title ='title '" + info [i] title.substr (0,20)+"</td>" 
    +"< TD data title ='place '" + info [i] address.substr (0,6)+"</td>" 
    +"< TD data title ='Registered '>" + info [i]. Quota_ Sign + "people < / td >" 
    +"< TD data title ='category '>" + info [i]. Type + "< / td >" 
    +"< TD data title ='operation '> < a ref =' <%"= request.getContextPath ()%>/activity_ edit.action?id= "+ info [i]. ID +" '> Edit < / a > < / td >“ 
    +"</tr>" 
    $("#t_body").html(tbody_content); 
   } 
  }
  else
  { 
   $("#t_head").html(""); 
   $("#t_body").html("<div style='height: 200px;width: 700px;padding-top: 100px;' align='center'>"+info.msg+"</div>"); 
  } 
 } 
 //Clear data 
 function clearDate()
 { 
  $("#t_body").html(""); 
 }
 //Search activity 
 $("#searchActivity").click(function(){ 
  queryForPages();
 }); 
 //Home page 
 $("#firstPage").click(function(){ 
  currentPage="1"; 
  queryForPages(); 
 }); 
 //Previous page 
 $("#previous").click(function(){ 
  if(currentPage>1)
  { 
   currentPage-- ; 
  } 
  queryForPages(); 
 }); 
 //Next page 
 $("#next").click(function(){ 
  if(currentPage<totalPage)
  { 
   currentPage++ ; 
  } 
  queryForPages(); 
 }); 
 //Last page 
 $("#last").click(function(){ 
  currentPage = totalPage; 
  queryForPages(); 
 }); 
});

The above code is a small introduction to the implementation of Ajax no refresh paging, I hope to help you.