recherche

Maison >développement back-end >PHP7 >Paging Ajax dans le développement de forums de discussion PHP7

Paging Ajax dans le développement de forums de discussion PHP7

coldplay.xixi
coldplay.xixiavant
2020-12-17 10:07:071967parcourir

Tutoriel php7La colonne présente la pagination Ajax dans le développement de forums de messages

Paging Ajax dans le développement de forums de discussion PHP7

Recommandé (gratuit) : Tutoriel php7

Avec le support de la page de base, si vous souhaitez améliorer l'expérience utilisateur de la page, le chargement asynchrone des données est actuellement la meilleure solution . chemin. La pagination Ajax est le meilleur scénario d'application pour s'entraîner. Les points de connaissances utilisés ont été introduits dans une certaine mesure dans le dernier cours de Friends - PHP7 Message Board Development (Soumission asynchrone Ajax). Si vous le comprenez, veuillez lire le contenu de la section précédente.

Répartition du didacticiel
  • 1. Définir une gotopage(){}Fonction
    JavaScript a une portée basée sur les fonctions Tant qu'elle est définie, la page actuelle est globale. disponible. Le logo est gotopage.
  • 2. Opération asynchrone Ajax
    D'après le contenu de la leçon précédente, la chose la plus importante ici est de faire attention à la méthode GET lors des requêtes asynchrones ajax.php. fichier logique qui doit être traité par le serveur de requêtes asynchrone. , recevez simplement la demande de changement de page de l'utilisateur et renvoyez les données du numéro de page de réponse (bien sûr, le contenu dans d'autres formats, tels que JSON, ne sera pas expliqué ici).
  • 3. Données d'impression JSinnerHTML

Imprimer les données de rotation de page dans la zone de page spécifiée<ul id="list_box"><u/>, la structure de style ici doit être dans ul Le contenu est affiché dans la balise, utilisez donc le sélecteur JS document.getElementById("list_box") pour obtenir l'objet de la balise ul, puis utilisez l'attribut innerHTML pour attribuer le contenu afin d'obtenir le résultat souhaité document.getElementById("list_box").innerHTML = '服务器返回的数据';

  • 4. Utilisation de la boucle JS for pour parcourir tous les numéros de page et identifier le numéro de page actuel

Utilisez le sélecteur pour obtenir tous les objets de la pagevar pageno = document.getElementsByClassName('pageno');
Calculez le nombre total de numéros de pagepageno.length
for parcourt jusqu'à ce que le page numéro de page demandé par l'utilisateur actuel corresponde, qui est la page actuelle si la correspondance est réussie, un style sera ajouté au numéro de page actuel (pour identifier le numéro de page pour lequel la requête en cours est réussie).

Ce tutoriel est basé sur le contenu de développement (pagination) du forum de messages PHP7 de Friends.

Code HTMLlist.php 
<?php
include &#39;config.php&#39;;

$page = !empty($_GET[&#39;page&#39;])?intval($_GET[&#39;page&#39;]):1;
$keyword = !empty($_GET[&#39;keyword&#39;])?strip_tags($_GET[&#39;keyword&#39;]):&#39;&#39;;
$pagesize = 6;

// 统计总记录数，便于计算出总页数
if(!empty($keyword)){
    $sql = "SELECT * FROM feedback WHERE name LIKE &#39;%{$keyword}%&#39;";
}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 &#39;%{$keyword}%&#39; 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 = &#39;page.php?page=&#39; + page + &#39;&keyword=&#39; + keyword;
                ajax.open(&#39;GET&#39;, 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(&#39;pageno&#39;);
                            // 这里用到for循环遍历 从多个分页的集合获取当前用户点击的那个分页链接并添加样式active
                            for(var i=0; i<pageno.length; i++){
                                pageno[i].className = &#39;pageno&#39;;
                                // parseInt(i)+1意思是当前分页,
                                if(parseInt(i)+1 == page){
                                    pageno[i].className = &#39;pageno active&#39;;
                                }
                            }
                        }
                    }
                }
            }
        </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=&#39;text&#39; 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[&#39;name&#39;]?> 联系方式：<?php echo $item[&#39;contact&#39;]?> 内容：<?php echo $item[&#39;content&#39;]?></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
Code de pagination asynchronepage.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;
Résumé

Cette section est relativement difficile pour les novices. les points de connaissances impliqués sont un résumé de ce que j’ai appris auparavant. Avant de commencer, vous devez clarifier vos idées et les mettre en œuvre étape par étape.
N'oubliez pas que les idées sont très importantes. L'apprendre seul ne suffit pas. Vous devez être capable de les maîtriser lorsque vous ressentez d'autres besoins similaires.
Enfin, il est temps de commencer à coder ! ~

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

php JavaScript json ajax html for 循环 var JS 对象 作用域 异步 innerHTML 选择器 ul
Déclaration：
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Article précédent：Enregistrer la gestion de l'arrière-plan du développement du forum de messages PHP7-connexion/déconnexionArticle suivant：Enregistrer la gestion de l'arrière-plan du développement du forum de messages PHP7-connexion/déconnexion

Articles Liés

Voir plus