Ajax paging in PHP7 message board development

php7 tutorial Column introduces Ajax paging in message board development

Recommended (free): php7 tutorial

With the support of the basic page, if you want to improve the user experience of the page, asynchronous data loading is currently the best solution. way. Ajax paging is the best application scenario for practicing. The knowledge points used have been introduced to a certain extent in the previous class of Friends - PHP7 message board development (Ajax asynchronous submission). I will not describe it here. If you understand it, please read Contents of the previous section.

Tutorial Breakdown

• 1. Definitiongotopage(){}Function

  JavaScript has function-based scope, as long as it is defined, The current page is globally available, and the identifier is gotopage.

• 2. Ajax asynchronous operation

  The content of the previous lesson, the most important thing here is to pay attention to the GET method when making asynchronous requests, ajax.php It is a logical file that needs to be processed by the asynchronous request server. It only needs to receive the user's page turning request and return the data of the number of response pages (of course, content in other formats, such as JSON, will not be explained here).

• 3. JS printing datainnerHTML

Print page turning data in the specified page area<ul id="list_box"><u></u></ul>, the style structure here is to output the content within the ul tag, so use the JS selector document.getElementById("list_box") to get the ul The object of the tag, and then use the innerHTML attribute to assign the content to achieve the results we want document.getElementById("list_box").innerHTML = 'Data returned by the server';

• 4. Use of JS loop for, traverse all page numbers and identify the current page number

Use a selector to get all Page object var pageno = document.getElementsByClassName('pageno');
Calculate the total number of page numberspageno.length
forLoop through until matching The page page number requested by the current user is the current page. If the match is successful, a style will be added to the current page number (identifying the page number for which the current request is successful).

This tutorial is based on the PHP7 message board development (pagination) content of Friends.

HTML codelist.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;
}

?>
nbsp;html>

    
        <meta>
        <title>异步翻页+列表带搜索功能_留言板_科科分享</title>
        <!-- 2.新建css样式文件并根据效果图编写css代码 -->
        <link>
        <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>
    
    
        <!-- 工作区，呈现给用户看的 -->
        <!-- 1.开始搭建脚手架 -->
        <p>
            </p><p>
                </p><h3 id="留言板">留言板</h3>
                <h5 id="LIST">LIST</h5>
            
            <p>
                </p><p>
                </p>

                     关键词：" />                                  

                                 

                                         
• 姓名： 联系方式： 内容：
                                     

                

                    

                                                 
• , '');">
                                             

                                           

Asynchronous paging codepage.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;])?addslashes(strip_tags($_GET[&#39;keyword&#39;])):&#39;&#39;;

$pagesize = 6;
// 开始分页查询，根据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 WHERE 1 LIMIT {$offset}, {$pagesize}";
}

$result = mysqli_query($mysqli, $sql);

$lists = array();
$list = &#39;&#39;;

while($rows = mysqli_fetch_array($result)){
    $list .= "<li>姓名：". $rows['name']." 联系方式：". $rows['contact']." 内容：".$rows['content']."";
}

echo $list;
exit;

Summary

This section is relatively difficult for novices. The knowledge points involved are a summary of what has been learned before. Before you start, you need to clarify your ideas and implement them step by step.
Remember that ideas are very important. Simply learning is not enough. You must be able to master it when you get other similar needs.
Finally, it’s time to start coding! ~

The above is the detailed content of Ajax paging in PHP7 message board development. For more information, please follow other related articles on the PHP Chinese website!