인 스 턴 스 코드 설명 ajax 구현 무 리 셋 페이지

1.Ajax 는 페이지 를 새로 고침 하지 않 는 장점 이 있 습 니 다.좋 은 고객 체험 을 제공 하고 Ajax 를 통 해 배경 에서 데이터 베 이 스 를 얻 고 보 여 주 며 페이지 를 불 러 오 기 를 기다 리 는 공백 상 태 를 단속 합 니 다.
2.그러면 Ajax 새로 고침 없 는 페이지 는 동적 페이지(.php)에서 실 행 됩 니까?아니면 정적 페이지(html/.html/.shtml)입 니까?정 답:정적 페이지;
3.실현 원리:전단 JS 스 크 립 트 프로그램 과 Ajax 를 결합 하여 동적 페이지 에서 되 돌아 오 는 데 이 터 를 얻 고 표시 합 니 다.
지금 은 모든 것 이 새로 고침 이 없 는 것 을 중시 합 니 다.페이지 도 마찬가지 입 니 다.다음은 작은 편집 이 일상 적 으로 정리 한 새로 고침 코드 에 관 한 것 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.
코드 는 다음 과 같 습 니 다:
1.html 코드 부분:

<table class="table style-5"> 
 <thead id="t_head"> 
  <tr> 
   <th>  </th> 
   <th>  </th> 
   <th>  </th> 
   <th>   </th> 
   <th>  </th> 
   <th>  </th> 
  </tr> 
</thead> 
<tbody id="t_body"> 
<!-- ajax     -->
</tbody> 
</table> 
<button id="firstPage">  </button> 
<button id="previous">   </button> 
<button id="next">   </button> 
<button id="last">  </button> 

2.ajax 코드 부분:

var pageSize = "10";//     
var currentPage = "1";//    
var totalPage = "0";//    
var rowCount = "0";//    
var params="";//   
var url="activity_list.action";//action 
$(document).ready(function(){//jquery    document        
 //     
 function queryForPages()
 { 
  $.ajax({ 
   url:url, 
   type:'post', 
   dataType:'json', 
   data:"qo.currentPage="+currentPage+"&qo.pageSize="+pageSize+params, 
   success:function callbackFun(data)
   { 
    //  json 
    var info = eval("("+data+")"); 
    //     
    clearDate(); 
    fillTable(info); 
   } 
  }); 
 } 
 //     
 function fillTable(info)
 { 
  if(info.length>1)
  { 
   totalPage=info[info.length-1].totalPage; 
   var tbody_content="";//       "",   "undefined" 
   for(var i=0;i<info.length-1;i++)
   { 
    tbody_content +="<tr>" 
    +"<td data-title='  ' >"+(i+1+(currentPage-1)*pageSize)+"</td>" 
    +"<td data-title='  '>"+info[i].title.substr(0,20)+"</td>" 
    +"<td data-title='  '>"+info[i].address.substr(0,6)+"</td>" 
    +"<td data-title='   '>"+info[i].quota_sign+" </td>" 
    +"<td data-title='  '>"+info[i].type+"</td>" 
    +"<td data-title='  '><a href='<%=request.getContextPath()%>/activity_edit.action?id="+info[i].id+"'>  </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>"); 
  } 
 } 
 //     
 function clearDate()
 { 
  $("#t_body").html(""); 
 }
 //     
 $("#searchActivity").click(function(){ 
  queryForPages();
 }); 
 //   
 $("#firstPage").click(function(){ 
  currentPage="1"; 
  queryForPages(); 
 }); 
 //    
 $("#previous").click(function(){ 
  if(currentPage>1)
  { 
   currentPage-- ; 
  } 
  queryForPages(); 
 }); 
 //    
 $("#next").click(function(){ 
  if(currentPage<totalPage)
  { 
   currentPage++ ; 
  } 
  queryForPages(); 
 }); 
 //   
 $("#last").click(function(){ 
  currentPage = totalPage; 
  queryForPages(); 
 }); 
});

이상 의 코드 는 여러분 에 게 소 개 된 aax 가 실현 한 무 갱신 페이지 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.