溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下怎么使用AJAX實現分頁，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
Fenye.html
<!DOCTYPE html>
<html>
<head>
<title>分頁</title>
</head>
<script type="text/javascript">
/**
* AJAX
* 1.創建ajax對象
* 2.建立連接
* 3.判斷ajax準備狀態及狀態碼
* 4.發送請求
*/
function showList(pageNow){
//創建ajax對象
var xmlHttp = new XMLHttpRequest();
//建立連接
xmlHttp.open('get','./AJAX_Fenye.php?pageNow='+pageNow);
//判斷ajax準備狀態及狀態碼
xmlHttp.onreadystatechange = function(){
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
//alert(xmlHttp.readyState);
document.getElementById('result').innerHTML = xmlHttp.responseText;
}
}
//發送請求
xmlHttp.send(null);
}
//默認顯示第1頁
window.onload = function(){
showList(1);
}
</script>
<body>
<input type="text">
<div id="result">
<!-- 此處顯示信息！ -->
</div>
</body>
</html>Fenye.php
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>AJAX分頁</title> </head> <body> <?php //以下php代碼可封裝調用，參數為pageNow //鏈接數據庫 @mysql_connect('localhost','root',''); @mysql_select_db('empmanage'); @mysql_query('set name utf8'); //獲取總記錄數 $rs = mysql_query('select count(*) from emp'); $rows = mysql_fetch_row($rs); $recordCount = $rows[0]; //每頁顯示多少條pageSize $pageSize = 5; //總頁數 = 總記錄/每頁顯示多少 $pageCount=ceil($recordCount/$pageSize); //獲取當前頁 三元運算 若不存在pageNow則默認顯示第1頁 $pageNow = isset($_GET['pageNow'])? $_GET['pageNow']:1; if ($pageNow < 1) { $pageNow = 1; }elseif ($pageNow > $pageCount) { $pageNow = $pageCount; } //起始位置 每頁從第幾條數據顯示 $pageStart = ($pageNow-1)*$pageSize; //從哪條開始顯示，限制每頁顯示幾條 $sql = "select * from emp limit $pageStart,$pageSize"; //鏈接數據庫 $rs = mysql_query($sql); //以上php代碼可封裝調用，參數為pageNow 返回查詢到的數據$rs ?> <table bordercolor="green" border="1"> <tr> <th>ID</th> <th>姓名</th> <th>郵箱</th> <th>等級</th> </tr> <?php //循環取出數據 while ($rows = mysql_fetch_assoc($rs)) { echo " <tr> <td>{$rows['id']}</td> <td>{$rows['name']}</td> <td>{$rows['email']}</td> <td>{$rows['level']}</td> </tr> "; } ?> <tr> <td colspan='4'> <?php //分頁頁碼 調用js中的showList()方法 此處$i=$pageNow for ($i=1; $i <= $pageCount; $i++) { echo "<a href = 'javascript:void(0)' onclick = 'showList($i)'>{$i}</a> "; } ?> </td> </tr> </table> </body> </html>
ajax是一種在無需重新加載整個網頁的情況下，能夠更新部分網頁的技術，可以通過在后臺與服務器進行少量數據交換，使網頁實現異步更新。
以上是“怎么使用AJAX實現分頁”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
