PHP7留言板开发之 Ajax分页
php7教程栏目介绍留言板开发中的Ajax分页
推荐(免费):php7教程
有了基础页面的支撑,想要提高页面的用户体验,那么异步的数据加载目前来说是最好的处理方式了。Ajax分页是练手的最好应用场景,运用到的知识点,在上节课老友记之PHP7留言板开发(Ajax异步提交)已经有了一定的介绍,这里就不再敖述,如有明白请看上节内容。
教程分解
-
1、定义
JavaScript具有基于函数的作用域,只要定义了,当前页面的是全局可用的,标识就是gotopage(){}
函数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 '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;
总结
本节新手来说相对较难,涉及到的知识点是之前学习过的一个汇总。动手之前要先理清思路,一步步实现。
切记思路很重要,单单学会还不够,要做到拿到其他类似的需求的时候,能得心应手,这样才算掌握。
最后就是动手撸代码啦!~
Atas ialah kandungan terperinci PHP7留言板开发之 Ajax分页. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas



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;

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.

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.

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: 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 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 ...

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

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.
