PHP7 メッセージボード開発における Ajax ページング
- coldplay.xixi転載
- 2020-12-17 10:07:071854ブラウズ
php7 チュートリアル 掲示板開発における Ajax ページングを紹介するコラム
推奨(無料): php7 チュートリアル
基本ページのサポートにより、ページのユーザー エクスペリエンスを向上させたい場合は、非同期データの読み込みが現時点で最適なソリューションです。方法。 Ajax ページングは練習に最適な応用シナリオです. 使用するナレッジポイントは、前回の Friends - PHP7 掲示板開発 (Ajax 非同期投稿) のクラスである程度紹介されています. ここでは説明しません.前のセクションの内容をお読みください。
チュートリアルの内訳
-
1. 定義
JavaScript には、関数ベースのスコープがあります。現在のページはグローバルに利用可能であり、識別子はgotopage(){}Functiongotopageと定義されています。 -
2. Ajax 非同期操作
前のレッスンの内容ですが、ここで最も重要なことは、非同期リクエストを行うときのGETメソッドに注意することです。ajax.php非同期リクエストサーバーで処理する必要がある論理ファイルであり、ユーザーのページめくりリクエストを受け取り、応答ページ数のデータを返すだけで済みます（もちろん他のコンテンツも含まれます） JSON などの形式についてはここでは説明しません)。 3. JS 印刷データ
innerHTML
指定されたページ領域にページめくりデータを印刷します<ul id= "list_box"><u/>、ここでのスタイル構造は ul タグ内のコンテンツを出力するため、JS セレクター document.getElementById("list_box") を使用して取得します。 ul タグのオブジェクト。その後、innerHTML 属性を使用してコンテンツを割り当て、必要な結果を実現します。 document.getElementById("list_box").innerHTML = 'サーバーから返されたデータ';
4. JS ループ
forを使用して、すべてのページ番号を走査し、現在のページ番号
セレクターを使用してすべての Page オブジェクトを取得します var pageno = document.getElementsByClassName('pageno');
ページ番号の合計数を計算しますpageno.lengthfor一致するまでループします。現在のユーザーが要求した page ページ番号は、現在のページです。一致が成功すると、スタイルが現在のページ番号に追加されます (識別)現在のリクエストが成功したページ番号)。
このチュートリアルは、Friends の PHP7 掲示板開発 (ページネーション) コンテンツに基づいています。
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;
// 统计总记录数，便于计算出总页数
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>
</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;
// 开始分页查询，根据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;
概要
このセクションは初心者にとっては比較的難しいです。関連する知識ポイントは、これまでに学習した内容の要約です。始める前に、アイデアを明確にし、段階的に実装する必要があります。
アイデアは非常に重要であることを忘れないでください。単に学ぶだけでは十分ではありません。他の同様のニーズが発生したときに、それを習得できる必要があります。
いよいよ、コーディングを開始します。 ~
以上がPHP7 メッセージボード開発における Ajax ページングの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。