基於ajax實現無重新整理分頁的方法_AJAX相關

來源:互聯網
上載者:User

本文執行個體講述了基於ajax實現無重新整理分頁的方法。分享給大家供大家參考。具體如下:

在普通的分頁中,一旦頁碼改變,則url改變,整個頁面都會重新整理,如果我們希望頁碼的改變不影響整個網頁的變動,可以使用ajax技術。

AJAX 是一種用於建立快速動態網頁的技術。通過在後台與伺服器進行少量資料交換,AJAX 可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下,對網頁的某部分進行更新。

通過用戶端html代碼,用ajax把伺服器中的資料通過get方式傳遞過來,顯示在html中。

<!doctype html> <html lang="en">  <head>  <meta charset="UTF-8">  <meta name="Generator" content="EditPlus®">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content="">  <title>ajax實現無重新整理分頁</title>  <script type="text/javascript">   function f1(url){     var xhr = new XMLHttpRequest;     xhr.onreadystatechange = function() {       if(xhr.readyState==4){         document.getElementById('d').innerHTML = xhr.responseText;       }     }     xhr.open("get",url);     xhr.send(null);   }     //頁面載入完成後,就調用該函數   window.onload = function(){     f1("fenye-data.php");   }  </script>  </head>  <body>   <h2 align='center'>ajax實現無重新整理分頁</h2>   <div id='d'></div>  </body> </html> 

在分頁類中,我們只需更改超連結的地址,將原來的地址更改為通過js調用f1()方法,將連結傳遞給js中的f1()方法。

<a href='javascript:f1(\"{$this->uri}&page=".($this->page+1)."\")'>

進一步的,可以使用json實現無重新整理效果的分頁,與ajax相比,json將html和css都寫在用戶端,從而節省了伺服器頻寬,也使使用者的請求速度加快,具體方法不再贅述。

希望本文所述對大家的Ajax程式設計有所協助。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.