有了基礎(chǔ)頁面的支撐菇晃，想要提高頁面的用戶體驗(yàn)蕉毯，那么異步的數(shù)據(jù)加載目前來說是最好的處理方式了蹦疑。Ajax分頁是練手的最好應(yīng)用場(chǎng)景西雀，運(yùn)用到的知識(shí)點(diǎn)，在上節(jié)課老友記之PHP7留言板開發(fā)（Ajax異步提交）已經(jīng)有了一定的介紹歉摧，這里就不再敖述艇肴，如有明白請(qǐng)看上節(jié)內(nèi)容腔呜。
教程分解
-
1、定義
JavaScript具有基于函數(shù)的作用域再悼，只要定義了核畴，當(dāng)前頁面的是全局可用的，標(biāo)識(shí)就是gotopage(){}函數(shù)gotopage冲九。 -
2谤草、Ajax異步操作
上節(jié)課的內(nèi)容，這里最要是異步請(qǐng)求的時(shí)候注意是GET方式莺奸，ajax.php是異步請(qǐng)求服務(wù)端需要處理的邏輯文件丑孩，接收用戶翻頁請(qǐng)求，返回響應(yīng)頁數(shù)的數(shù)據(jù)即可（當(dāng)然其他格式的內(nèi)容就行灭贷，比如JSON温学，這里就不講解）。 -
3氧腰、JS打印數(shù)據(jù)
innerHTML
在指定的頁面區(qū)域打印翻頁數(shù)據(jù)<ul id="list_box"><u/>枫浙，這里的樣式結(jié)構(gòu)是要在ul標(biāo)簽內(nèi)輸出內(nèi)容，所以用JS選擇器document.getElementById("list_box")古拴，獲取ul標(biāo)簽的對(duì)象箩帚，然后運(yùn)用其中的innerHTML屬性賦值內(nèi)容，完成我們想要的結(jié)果document.getElementById("list_box").innerHTML = '服務(wù)器返回的數(shù)據(jù)';
-
4黄痪、JS循環(huán)
for的運(yùn)用紧帕，遍歷所有頁碼并標(biāo)識(shí)當(dāng)前頁碼
用選擇器獲取所有的頁面對(duì)象var pageno = document.getElementsByClassName('pageno');
計(jì)算總頁碼數(shù)量pageno.length
for循環(huán)遍歷直到匹配到當(dāng)前用戶請(qǐng)求的page頁碼數(shù)即當(dāng)前頁，匹配成功就給當(dāng)前頁數(shù)添加樣式（標(biāo)識(shí)當(dāng)前請(qǐng)求成功的頁數(shù)）桅打。
本教程基于老友記之PHP7留言板開發(fā)（分頁）內(nèi)容上改動(dòng)是嗜。
HTML代碼list.php
<?php
include 'config.php';
$page = !empty($_GET['page'])?intval($_GET['page']):1;
$keyword = !empty($_GET['keyword'])?strip_tags($_GET['keyword']):'';
$pagesize = 6;
// 統(tǒng)計(jì)總記錄數(shù)，便于計(jì)算出總頁數(shù)
if(!empty($keyword)){
$sql = "SELECT * FROM feedback WHERE name LIKE '%{$keyword}%'";
}else{
$sql = "SELECT * FROM feedback";
}
$result = mysqli_query($mysqli, $sql);
$total = mysqli_affected_rows($mysqli);
$total_page = ceil($total/$pagesize); // 進(jìn)一法取整獲取總頁數(shù)
// 開始分頁查詢挺尾，根據(jù)page計(jì)算偏移量
$offset = ($page - 1) * $pagesize;
if(!empty($keyword)){
$sql = "SELECT * FROM feedback WHERE name LIKE '%{$keyword}%' LIMIT {$offset}, {$pagesize}";
}else{
$sql = "SELECT * FROM feedback LIMIT {$offset}, {$pagesize}";
}
$result = mysqli_query($mysqli, $sql);
$lists = array();
while($rows = mysqli_fetch_array($result)){
$lists[] = $rows;
}
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>異步翻頁+列表帶搜索功能_留言板_科科分享</title>
<!-- 2.新建css樣式文件并根據(jù)效果圖編寫css代碼 -->
<link rel="stylesheet" href="feedback.css">
<script>
function gotopage(page, keyword){
if(page<0){
page = 1;
}
// 創(chuàng)建 XMLHttpRequest 對(duì)象
var ajax, url;
if(window.XMLHttpRequest){
ajax = new XMLHttpRequest();
}else{
// 兼容Internet Explorer（IE5 和 IE6）使用 ActiveX 對(duì)象
ajax = new ActiveXObject("Microsoft.XMLHTTP");
}
url = 'page.php?page=' + page + '&keyword=' + keyword;
ajax.open('GET', url, true);
ajax.send();
ajax.onreadystatechange = function(){
// 獲取服務(wù)器響應(yīng)狀態(tài)碼
if(ajax.readyState == 4 && ajax.status==200){
// 獲取服務(wù)器返回的響應(yīng)返回的數(shù)據(jù)
var retdata = ajax.responseText;
// 如果返回的時(shí)候不為空的時(shí)候鹅搪，就輸出
if(retdata){
// 這里是將異步請(qǐng)求的數(shù)據(jù) 在指定區(qū)域（list_box）展示給用戶看
document.getElementById("list_box").innerHTML = retdata;
// 最后將頁面中的定位當(dāng)前分頁數(shù)，告訴用戶當(dāng)前在哪個(gè)分頁
// 這里相對(duì)邏輯會(huì)復(fù)雜點(diǎn)遭铺，慢慢領(lǐng)會(huì)
// 第一步獲取所有分頁數(shù)的集合
var pageno = document.getElementsByClassName('pageno');
// 這里用到for循環(huán)遍歷 從多個(gè)分頁的集合獲取當(dāng)前用戶點(diǎn)擊的那個(gè)分頁鏈接并添加樣式active
for(var i=0; i<pageno.length; i++){
pageno[i].className = 'pageno';
// parseInt(i)+1意思是當(dāng)前分頁,
if(parseInt(i)+1 == page){
pageno[i].className = 'pageno active';
}
}
}
}
}
}
</script>
</head>
<body>
<!-- 工作區(qū)丽柿，呈現(xiàn)給用戶看的 -->
<!-- 1.開始搭建腳手架 -->
<div class="container_box">
<div class="up">
<h3 class="title">留言板</h3>
<h5 class="subtitle">LIST</h5>
</div>
<div class="down list">
<div class="search">
<form action="list.php">
關(guān)鍵詞：<input type='text' name="keyword" value="<?php echo $keyword?>" />
<input type="submit" value="去搜索">
</form>
</div>
<ul id="list_box">
<?php
foreach($lists as $item){
?>
<li>姓名：<?php echo $item['name']?> 聯(lián)系方式：<?php echo $item['contact']?> 內(nèi)容：<?php echo $item['content']?></li>
<?php
}
?>
</ul>
<div class="pages">
<ul>
<?php
for($p = 1; $p<=$total_page; $p++){
?>
<li class="pageno"><a href="javascript:gotopage(<?php echo $p?>, '<?php echo $keyword?>');"><?php echo $p?></a></li>
<?php
}
?>
</ul>
</div>
</div>
</div>
</body>
</html
異步分頁代碼page.php
<?php
include 'config.php';
$page = !empty($_GET['page'])? intval($_GET['page']):1;
$keyword = !empty($_GET['keyword'])?addslashes(strip_tags($_GET['keyword'])):'';
$pagesize = 6;
// 開始分頁查詢，根據(jù)page計(jì)算偏移量
$offset = ($page - 1) * $pagesize;
if(!empty($keyword)){
$sql = "SELECT * FROM feedback WHERE name LIKE '%{$keyword}%' LIMIT {$offset}, {$pagesize}";
}else{
$sql = "SELECT * FROM feedback WHERE 1 LIMIT {$offset}, {$pagesize}";
}
$result = mysqli_query($mysqli, $sql);
$lists = array();
$list = '';
while($rows = mysqli_fetch_array($result)){
$list .= "<li>姓名：". $rows['name']." 聯(lián)系方式：". $rows['contact']." 內(nèi)容：".$rows['content']."</li>";
}
echo $list;
exit;
總結(jié)
本節(jié)新手來說相對(duì)較難魂挂，涉及到的知識(shí)點(diǎn)是之前學(xué)習(xí)過的一個(gè)匯總甫题。動(dòng)手之前要先理清思路，一步步實(shí)現(xiàn)涂召。
切記思路很重要坠非，單單學(xué)會(huì)還不夠，要做到拿到其他類似的需求的時(shí)候果正，能得心應(yīng)手炎码，這樣才算掌握盟迟。
最后就是動(dòng)手?jǐn)]代碼啦！~
