php7-TutorialDie Kolumne stellt Ajax-Paging in der Message-Board-Entwicklung vor
Empfohlen (kostenlos): php7-Tutorial
Mit der Unterstützung der Basisseite möchte ich den Benutzer verbessern Wenn Sie Erfahrung mit der Seite haben, ist das asynchrone Laden von Daten derzeit die beste Möglichkeit, damit umzugehen. Ajax-Paging ist das beste Anwendungsszenario zum Üben. Die verwendeten Wissenspunkte wurden in gewissem Umfang in der vorherigen Klasse von Friends – PHP7 Message Board Development (Ajax Asynchronous Submission) eingeführt. Bitte lesen Sie den Inhalt des vorherigen Abschnitts.
gotopage(){}Funktiongotopage. gotopage(){}函数JavaScript具有基于函数的作用域，只要定义了，当前页面的是全局可用的，标识就是gotopage。GET方式，ajax.php是异步请求服务端需要处理的逻辑文件，接收用户翻页请求，返回响应页数的数据即可（当然其他格式的内容就行，比如JSON，这里就不讲解）。innerHTML
在指定的页面区域打印翻页数据<ul id="list_box"><u/>，这里的样式结构是要在ul标签内输出内容，所以用JS选择器document.getElementById("list_box")，获取ul标签的对象，然后运用其中的innerHTML属性赋值内容，完成我们想要的结果document.getElementById("list_box").innerHTML = '服务器返回的数据';
for的运用，遍历所有页码并标识当前页码用选择器获取所有的页面对象var pageno = document.getElementsByClassName('pageno');
计算总页码数量pageno.lengthfor循环遍历直到匹配到当前用户请求的page页码数即当前页，匹配成功就给当前页数添加样式（标识当前请求成功的页数）。
本教程基于老友记之PHP7留言板开发（分页）内容上改动。
list.php
<?php
include 'config.php';
$page = !empty($_GET['page'])?intval($_GET['page']):1;
$keyword = !empty($_GET['keyword'])?strip_tags($_GET['keyword']):'';
$pagesize = 6;
// 统计总记录数，便于计算出总页数
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); // 进一法取整获取总页数
// 开始分页查询，根据page计算偏移量
$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样式文件并根据效果图编写css代码 -->
<link rel="stylesheet" href="feedback.css">
<script>
function gotopage(page, keyword){
if(page<0){
page = 1;
}
// 创建 XMLHttpRequest 对象
var ajax, url;
if(window.XMLHttpRequest){
ajax = new XMLHttpRequest();
}else{
// 兼容Internet Explorer（IE5 和 IE6）使用 ActiveX 对象
ajax = new ActiveXObject("Microsoft.XMLHTTP");
}
url = 'page.php?page=' + page + '&keyword=' + keyword;
ajax.open('GET', url, true);
ajax.send();
ajax.onreadystatechange = function(){
// 获取服务器响应状态码
if(ajax.readyState == 4 && ajax.status==200){
// 获取服务器返回的响应返回的数据
var retdata = ajax.responseText;
// 如果返回的时候不为空的时候，就输出
if(retdata){
// 这里是将异步请求的数据 在指定区域（list_box）展示给用户看
document.getElementById("list_box").innerHTML = retdata;
// 最后将页面中的定位当前分页数，告诉用户当前在哪个分页
// 这里相对逻辑会复杂点，慢慢领会
// 第一步获取所有分页数的集合
var pageno = document.getElementsByClassName('pageno');
// 这里用到for循环遍历 从多个分页的集合获取当前用户点击的那个分页链接并添加样式active
for(var i=0; i<pageno.length; i++){
pageno[i].className = 'pageno';
// parseInt(i)+1意思是当前分页,
if(parseInt(i)+1 == page){
pageno[i].className = 'pageno active';
}
}
}
}
}
}
</script>
</head>
<body>
<!-- 工作区，呈现给用户看的 -->
<!-- 1.开始搭建脚手架 -->
<p class="container_box">
<p class="up">
<h3 class="title">留言板</h3>
<h5 class="subtitle">LIST</h5>
</p>
<p class="down list">
<p class="search">
<form action="list.php">
关键词：<input type='text' name="keyword" value="<?php echo $keyword?>" />
<input type="submit" value="去搜索">
</form>
</p>
<ul id="list_box">
<?php
foreach($lists as $item){
?>
<li>姓名：<?php echo $item['name']?> 联系方式：<?php echo $item['contact']?> 内容：<?php echo $item['content']?></li>
<?php
}
?>
</ul>
<p 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>
</p>
</p>
</p>
</body>
</htmlpage.phpGET zu achten, ajax.php Es handelt sich um eine logische Datei, die vom asynchronen Anforderungsserver verarbeitet werden muss. Sie muss lediglich die Umblätteranforderung des Benutzers empfangen und die Daten der Anzahl der Antwortseiten (natürlich den Inhalt in) zurückgeben andere Formate wie JSON werden hier nicht erläutert. 3. JS-Druckdaten innerHTMLUmblätterdaten im angegebenen Seitenbereich drucken Das obige ist der detaillierte Inhalt vonAjax-Paging in der PHP7-Messageboard-Entwicklung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!, die Stilstruktur hier besteht darin, den Inhalt innerhalb des ul-Tags auszugeben, also verwenden Sie den JS-Selektor
document.getElementById("list_box"), um Rufen Sie das ul-Tag-Objekt ab und verwenden Sie dann das Attribut innerHTML, um Inhalte zuzuweisen und die gewünschten Ergebnisse zu erzielen. document.getElementById("list_box").innerHTML = 'Vom Server zurückgegebene Daten'; code>🎜Berechnen Sie die Gesamtzahl der Seitenzahlen
🎜4. Verwendung der JS-Schleife for, um alle Seitenzahlen zu durchlaufen und die aktuelle Seitenzahl zu identifizieren🎜Verwenden Sie einen Selektor um alle Seitenobjekte zu erhaltenvar pageno = document.getElementsByClassName('pageno');pageno.length🎜fürSchleife, bis die aktuelle Benutzeranfrage übereinstimmt. Die Seitennummer page ist die aktuelle Seite. Wenn die Übereinstimmung erfolgreich ist, wird ein Stil zur aktuellen Seitennummer hinzugefügt (der die Seitennummer identifiziert, für die die aktuelle Seite gilt). Anfrage ist erfolgreich). 🎜🎜Dieses Tutorial basiert auf dem Inhalt der PHP7-Messageboard-Entwicklung (Paginierung) von Friends. 🎜
🎜HTML-Code list.php🎜🎜Asynchroner Paging-Code <?php
include 'config.php';
$page = !empty($_GET['page'])? intval($_GET['page']):1;
$keyword = !empty($_GET['keyword'])?addslashes(strip_tags($_GET['keyword'])):'';
$pagesize = 6;
// 开始分页查询，根据page计算偏移量
$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']." 联系方式：". $rows['contact']." 内容：".$rows['content']."</li>";
}
echo $list;
exit;Nach dem Login kopierenpage.php🎜rrreee🎜Zusammenfassung🎜🎜Dieser Abschnitt ist für Anfänger relativ schwierig und erfordert The Gelernte Wissenspunkte sind eine Zusammenfassung dessen, was zuvor gelernt wurde. Bevor es losgeht, müssen Sie Ihre Vorstellungen klären und diese Schritt für Schritt umsetzen. 🎜Denken Sie daran, dass Denken allein nicht ausreicht. Sie müssen es beherrschen, wenn Sie andere ähnliche Bedürfnisse haben. 🎜Endlich ist es Zeit, mit dem Codieren zu beginnen! ~🎜
