Jadual Kandungan
教程分解
1、定义gotopage(){}函数
2、Ajax异步操作
4、JS循环for的运用,遍历所有页码并标识当前页码
总结
Rumah pembangunan bahagian belakang PHP7 PHP7留言板开发之 Ajax分页

PHP7留言板开发之 Ajax分页

Dec 17, 2020 am 10:07 AM
php7

php7教程栏目介绍留言板开发中的Ajax分页

PHP7留言板开发之 Ajax分页

推荐(免费):php7教程

有了基础页面的支撑,想要提高页面的用户体验,那么异步的数据加载目前来说是最好的处理方式了。Ajax分页是练手的最好应用场景,运用到的知识点,在上节课老友记之PHP7留言板开发(Ajax异步提交)已经有了一定的介绍,这里就不再敖述,如有明白请看上节内容。

教程分解
  • 1、定义gotopage(){}函数
    JavaScript具有基于函数的作用域,只要定义了,当前页面的是全局可用的,标识就是gotopage
  • 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的运用,遍历所有页码并标识当前页码

用选择器获取所有的页面对象var pageno = document.getElementsByClassName('pageno');
计算总页码数量pageno.length
for循环遍历直到匹配到当前用户请求的page页码数即当前页,匹配成功就给当前页数添加样式(标识当前请求成功的页数)。

本教程基于老友记之PHP7留言板开发(分页)内容上改动。

HTML代码list.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
Salin selepas log masuk
异步分页代码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;
Salin selepas log masuk
总结

本节新手来说相对较难,涉及到的知识点是之前学习过的一个汇总。动手之前要先理清思路,一步步实现。
切记思路很重要,单单学会还不够,要做到拿到其他类似的需求的时候,能得心应手,这样才算掌握。
最后就是动手撸代码啦!~

Atas ialah kandungan terperinci PHP7留言板开发之 Ajax分页. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Bagaimana untuk memasang sambungan mongo dalam php7.0 Bagaimana untuk memasang sambungan mongo dalam php7.0 Nov 21, 2022 am 10:25 AM

Cara memasang sambungan mongo dalam php7.0: 1. Buat kumpulan pengguna dan pengguna mongodb 2. Muat turun pakej kod sumber mongodb dan letakkan pakej kod sumber dalam direktori "/usr/local/src/" 3. Masukkan direktori "src/" 4. Buka zip pakej kod sumber 5. Buat direktori fail mongodb 6. Salin fail ke direktori "mongodb/" 7. Buat fail konfigurasi mongodb;

Bagaimana untuk menyelesaikan masalah apabila php7 mengesan bahawa port tcp tidak berfungsi Bagaimana untuk menyelesaikan masalah apabila php7 mengesan bahawa port tcp tidak berfungsi Mar 22, 2023 am 09:30 AM

Dalam php5, kita boleh menggunakan fungsi fsockopen() untuk mengesan port TCP. Fungsi ini boleh digunakan untuk membuka sambungan rangkaian dan melakukan beberapa komunikasi rangkaian. Tetapi dalam php7, fungsi fsockopen() mungkin menghadapi beberapa masalah, seperti tidak dapat membuka port, tidak dapat menyambung ke pelayan, dsb. Untuk menyelesaikan masalah ini, kita boleh menggunakan fungsi socket_create() dan fungsi socket_connect() untuk mengesan port TCP.

Apakah yang perlu saya lakukan jika pemalam dipasang dalam php7.0 tetapi ia masih menunjukkan bahawa ia tidak dipasang? Apakah yang perlu saya lakukan jika pemalam dipasang dalam php7.0 tetapi ia masih menunjukkan bahawa ia tidak dipasang? Apr 02, 2024 pm 07:39 PM

Untuk menyelesaikan pemalam yang tidak menunjukkan isu yang dipasang dalam PHP 7.0: Semak konfigurasi pemalam dan dayakan pemalam. Mulakan semula PHP untuk menggunakan perubahan konfigurasi. Semak kebenaran fail pemalam untuk memastikan ia betul. Pasang kebergantungan yang hilang untuk memastikan pemalam berfungsi dengan betul. Jika semua langkah lain gagal, bina semula PHP. Punca lain yang mungkin termasuk versi pemalam yang tidak serasi, memuatkan versi yang salah atau isu konfigurasi PHP.

Apr 09, 2024 pm 01:33 PM

Penyelesaian biasa untuk persekitaran pelayan PHP termasuk memastikan versi PHP yang betul dipasang dan fail yang berkaitan telah disalin ke direktori modul. Lumpuhkan SELinux buat sementara waktu atau selama-lamanya. Semak dan konfigurasikan PHP.ini untuk memastikan sambungan yang diperlukan telah ditambah dan disediakan dengan betul. Mulakan atau mulakan semula perkhidmatan PHP-FPM. Semak tetapan DNS untuk isu penyelesaian.

Cara memasang dan menggunakan php7.0 Cara memasang dan menggunakan php7.0 Nov 30, 2022 am 09:56 AM

Cara memasang dan menggunakan php7.0: 1. Pergi ke laman web rasmi PHP untuk memuat turun versi pemasangan yang sepadan dengan sistem tempatan 2. Ekstrak fail zip yang dimuat turun ke direktori yang ditentukan 3. Buka tetingkap baris arahan dan pergi ke direktori "E:\php7" Hanya jalankan arahan "php -v".

Bagaimana cara menetapkan kebenaran secara automatik UnixSocket selepas sistem dimulakan semula? Bagaimana cara menetapkan kebenaran secara automatik UnixSocket selepas sistem dimulakan semula? Mar 31, 2025 pm 11:54 PM

Bagaimana untuk menetapkan keizinan UnixSocket secara automatik selepas sistem dimulakan semula. Setiap kali sistem dimulakan semula, kita perlu melaksanakan perintah berikut untuk mengubahsuai keizinan UnixSocket: sudo ...

Mengapa ralat berlaku semasa memasang pelanjutan menggunakan PECL dalam persekitaran Docker? Bagaimana menyelesaikannya? Mengapa ralat berlaku semasa memasang pelanjutan menggunakan PECL dalam persekitaran Docker? Bagaimana menyelesaikannya? Apr 01, 2025 pm 03:06 PM

Punca dan penyelesaian untuk kesilapan Apabila menggunakan PECL untuk memasang sambungan dalam persekitaran Docker Apabila menggunakan persekitaran Docker, kami sering menemui beberapa sakit kepala ...

Mana satu lebih baik, php8 atau php7? Mana satu lebih baik, php8 atau php7? Nov 16, 2023 pm 03:09 PM

Berbanding dengan PHP7, PHP8 mempunyai beberapa kelebihan dan penambahbaikan dari segi prestasi, ciri baharu dan penambahbaikan sintaks, sistem jenis, pengendalian ralat dan sambungan. Walau bagaimanapun, memilih versi yang hendak digunakan bergantung pada keperluan khusus anda dan keadaan projek. Pengenalan terperinci: 1. Peningkatan prestasi, PHP8 memperkenalkan pengkompil Just-in-Time (JIT), yang boleh meningkatkan kelajuan pelaksanaan kod 2. Ciri baharu dan penambahbaikan sintaks, PHP8 menyokong pengisytiharan parameter yang dinamakan dan parameter pilihan, membuat fungsi Panggilan adalah lebih fleksibel kelas tanpa nama, jenis pengisytiharan sifat, dsb.

See all articles