search

博客列表 >利用AJAX实现一个无刷新的分页功能

利用AJAX实现一个无刷新的分页功能

残破的蛋蛋
残破的蛋蛋原创
2021年03月02日 16:21:56919浏览

实战项目：AJAX实现无刷新分页功能

一、效果图

分页效果图

二、实现步骤

首先，实现一个分页，PHP后端需要给前端提供两个数据即可实现分页：

1. 一共需要分多少页；

2. 每页显示的数据是多少条。

根据上面两条原理，我们先设计一个数据库，并插入一些数据：

  • 建表语句：
  1. CREATE TABLE `staffs` (
  2.   `uid` int(10) unsigned NOT NULL AUTO_INCREMENT,
  3.   `name` varchar(20) COLLATE utf8mb4_unicode_ci NOT NULL COMMENT '姓名',
  4.   `age` int(10) unsigned NOT NULL DEFAULT '0' COMMENT '年龄',
  5.   `gender` enum('male','female') COLLATE utf8mb4_unicode_ci NOT NULL,
  6.   `salary` int(10) unsigned NOT NULL DEFAULT '2000',
  7.   `email` varchar(50) COLLATE utf8mb4_unicode_ci NOT NULL COMMENT '邮箱',
  8.   `birthday` date NOT NULL COMMENT '生日',
  9.   `create_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建日期',
  10.   `update_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '修改日期',
  11.   `status` tinyint(1) NOT NULL DEFAULT '1' COMMENT '状态',
  12.   PRIMARY KEY (`uid`)
  13. ) ENGINE=InnoDB AUTO_INCREMENT=18 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
  • 插入数据：
  1. INSERT INTO `staffs` VALUES (1, '残破的蛋蛋', 33, 'male', 4100, 'admin@admin.cn', '1990-03-31', '2021-02-25 19:20:09', '2021-03-02 15:13:30', 0);
  2. INSERT INTO `staffs` VALUES (2, '拤碎的蛋蛋', 0, 'female', 2500, 'sui@admin.cn', '1991-04-26', '2021-02-25 19:20:09', '2021-03-02 14:48:49', 1);
  3. INSERT INTO `staffs` VALUES (3, 'king', 0, 'male', 6500, 'king@php.cn', '1992-10-29', '2021-02-25 19:20:09', '2021-03-02 14:48:49', 1);
  4. INSERT INTO `staffs` VALUES (4, 'amy', 0, 'female', 7800, 'amy@163.com', '1998-10-22', '2021-02-25 19:20:09', '2021-03-02 14:48:49', 1);
  5. INSERT INTO `staffs` VALUES (5, 'betty', 0, 'female', 9800, 'betty@qq.com', '1953-10-19', '2021-02-25 19:20:09', '2021-03-02 14:48:49', 1);
  6. INSERT INTO `staffs` VALUES (6, 'jack', 24, 'male', 12500, 'jack@php.cn', '1977-10-24', '2021-02-25 19:20:09', '2021-03-02 14:48:49', 1);
  7. INSERT INTO `staffs` VALUES (7, 'marry', 12, 'female', 15800, 'marry@php.cn', '1990-01-08', '2021-02-25 19:20:09', '2021-03-02 14:47:37', 1);
  8. INSERT INTO `staffs` VALUES (8, 'alice', 0, 'female', 8600, 'alice@php.cn', '1989-09-18', '2021-02-25 19:20:09', '2021-03-01 17:09:08', 1);
  9. INSERT INTO `staffs` VALUES (9, 'admin', 0, 'male', 16600, 'admin@php.cn', '1989-09-18', '2021-02-25 19:20:09', '2021-03-01 17:09:08', 1);
  10. INSERT INTO `staffs` VALUES (10, 'lisa', 0, 'female', 13500, 'lisa@qq.com', '1983-09-13', '2021-02-25 19:20:09', '2021-03-01 17:09:08', 1);
  11. INSERT INTO `staffs` VALUES (11, 'peter', 32, 'male', 9600, 'peter@163.com', '1993-09-29', '2021-02-25 19:20:09', '2021-03-01 18:14:30', 1);
  12. INSERT INTO `staffs` VALUES (12, 'linda', 0, 'female', 5600, 'linda@163.com', '1993-09-29', '2021-02-25 19:20:09', '2021-03-01 17:09:08', 1);
  13. INSERT INTO `staffs` VALUES (13, 'Jerry', 30, 'male', 8899, '12345@qq.com', '1991-08-01', '2021-02-27 00:04:00', '2021-03-01 17:09:08', 1);
  14. INSERT INTO `staffs` VALUES (14, 'Tom', 30, 'female', 27891, 'tom@qq.com', '1996-01-01', '2021-02-27 00:08:47', '2021-03-01 17:18:31', 1);
  15. INSERT INTO `staffs` VALUES (15, 'Kimi', 35, 'male', 19871, 'Kimi@126.com', '2000-01-27', '2021-02-27 00:11:08', '2021-02-27 00:11:08', 1);
  16. INSERT INTO `staffs` VALUES (16, '李磊', 35, 'male', 6871, 'Lilei@163.com', '1993-06-17', '2021-02-27 00:41:13', '2021-02-27 00:41:13', 1);
  • 效果图：

表中数据

三、代码实现

3.1 目录结构

下面是我在写这个分页的时候创建的目录结构：

目录结构

3.2 书写代码

因为要使用到数据库，首先需要做的是数据库配置：

  • config.php 数据库配置文件
  1. <?php
  2. // 数据库配置
  3. return [
  4.     'type' => 'mysql',
  5.     'host' => 'localhost',
  6.     'dbname'=> 'phpedu',
  7.     'port' => 3306,
  8.     'charset'=> 'utf8mb4',
  9.     'username' => 'root',
  10.     'password' => 'root',
  11. ];

数据库配置完毕之后，连接数据库，创建PDO对象。

  • connect.php 连接数据库文件
  1. $config = require __DIR__ . '/config.php';
  2. extract($config);
  3. $dsn = sprintf('%s:host=%s;dbname=%s;port=%s;charset=%s', $type, $host, $dbname, $port, $charset);
  4. try {
  5.     $pdo = new PDO($dsn, $username, $password);
  6.     $pdo->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_ASSOC);
  7. } catch (PDOException $e) {
  8.     die("数据库连接失败：" . $e->getMessage());
  9. }

以上工作完成之后，我们写一下index.php页面，这是最开始的入口页面：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>分页案例</title>
  8.     </title>
  9.     <link rel="stylesheet" href="./paginate/static/css/table.css">
  10.     <script src="./paginate/static/js/table.js"></script>
  11. </head>
  12. <body>
  13.     <div class="container">
  14.         <div class="box">
  15.             <table cellpadding="0" cellspacing="0">
  16.                 <caption>员工信息管理系统</caption>
  17.                 <thead>
  18.                     <tr>
  19.                         <td>ID</td>
  20.                         <td>名字</td>
  21.                         <td>年龄</td>
  22.                         <td>性别</td>
  23.                         <td>工资</td>
  24.                         <td>邮箱</td>
  25.                         <td>生日</td>
  26.                         <td>操作</td>
  27.                     </tr>
  28.                 </thead>
  29.                 <tbody class="tableBody">
  30.                 </tbody>
  31.             </table>
  32.             <div class="paginate">
  34.             </div>
  35.         </div>
  36.     </div>
  37. </body>
  38. </html>
  40. <script>
  41.     // 加载默认数据
  42.     getList(1);
  43. </script>

由于数据都是通过AJAX异步请求获取的，这里引用了paginate/static/js/table.js里面的方法。

  • table.js 脚本代码
  1. /**
  2.  * 获取当前页的数据
  3.  * @param {int} val 当前页码值
  4.  */
  5. function getList(val) {
  6.     // 1. 创建xhr对象
  7.     let xhr = new XMLHttpRequest;
  8.     console.log(xhr);
  9.     // 2. 配置xhr参数
  10.     xhr.open('GET', `http://localhost:8888/PHP/20210225/paginate/getList.php?p=${val}`);
  11.     xhr.responseType = 'json';
  12.     // 3. 处理xhr响应
  13.     // 成功
  14.     xhr.onload = () => {
  15.         console.log(xhr.response);
  16.         // console.log(createTable(xhr.response));
  17.         // 内容
  18.         createTable(xhr.response);
  19.         // 分页
  20.         createPaginate(xhr.response);
  21.     };
  22.     // 失败
  23.     xhr.onerror = () => {
  24.         console.log('xhr Falied...');
  25.     }
  26.     // 4. 发送请求
  27.     // let formData = new FormData();
  28.     // formData.append("p", val);
  29.     xhr.send(null);
  30. }
  31. /**
  32.  * 创建员工信息表
  33.  * @param {object} table 后端返回的员工数据
  34.  */
  35. function createTable(table) {
  36.     // 创建表格html结构
  37.     let tableHTML = '<tr>';
  38.     for (const item of table.staffs) {
  39.         console.log(item);
  40.         let {uid, name, age, gender, salary, email, birthday} = item;
  41.         tableHTML += `<td>${uid}</td>`;
  42.         tableHTML += `<td>${name}</td>`;
  43.         tableHTML += `<td>${age}</td>`;
  44.         tableHTML += `<td>${gender}</td>`;
  45.         tableHTML += `<td>${salary}</td>`;
  46.         tableHTML += `<td>${email}</td>`;
  47.         tableHTML += `<td>${birthday}</td>`;
  48.         tableHTML += `<td>
  49.                         <div class="btn-wrap">
  50.                             <a data-uid=${uid} class="btn edit">编辑</a>
  51.                             <a data-uid=${uid} class="btn del">删除</a>
  52.                         </div>
  53.                     </td>`;
  54.         tableHTML += '</tr><tr>';
  55.     }
  56.     tableBody.innerHTML = tableHTML;
  57.     // 编辑按钮
  58.     const edit = document.querySelectorAll('.edit');
  59.     Array.from(edit).forEach(item => item.addEventListener('click', ev => {
  60.         ev.preventDefault();
  61.         console.log(ev.target.dataset.uid);
  62.         let uid = ev.target.dataset.uid;
  63.         // let queryString = location.search;
  64.         window.location.href = `./paginate/edit.php?p=${table.page}&uid=${uid}`;
  65.     }));
  66.     // 删除按钮
  67.     const del = document.querySelectorAll('.del');
  68.     Array.from(del).forEach(item => item.addEventListener('click', ev => {
  69.         ev.preventDefault();
  70.         console.log(ev.target.dataset.uid);
  71.         let uid = ev.target.dataset.uid;
  72.         let url = `./paginate/api.php?actions=del&uid=${uid}`;
  73.         if (confirm('确定删除该员工数据吗?')) {
  74.             let xhr = new XMLHttpRequest();
  75.             console.log(xhr);
  76.             xhr.open('get', url);
  77.             xhr.responseType = 'json';
  78.             xhr.onload = () => {
  79.                 console.log(xhr.response);
  80.                 if (xhr.response.status === 1) {
  81.                     alert(xhr.response.msg);
  82.                     window.location.href = 'index.php';
  83.                 } else {
  84.                     alert(xhr.response.msg);   
  85.                 }
  86.             };
  87.             xhr.send(null);
  88.         };
  89.     }));
  90. }
  91. /**
  92.  * 创建分页数字按钮
  93.  * @param {object} obj 员工信息数据
  94.  */
  95. function createPaginate(obj) {
  96.     // 获取总页数
  97.     let pages = obj.pages;
  98.     // 获取当前页
  99.     let page = obj.page;
  100.     console.log(pages, page);
  101.     // 上一页
  102.     let prev = page - 1;
  103.     let pageBtn = '';
  104.     if (page == 1) {
  105.         prev = page;
  106.     }
  107.     // 上一页、首页
  108.     pageBtn += `<a href="javascript:;" data-page="${prev}" class="prev">&lt;</a>
  109.                 <a href="javascript:;" data-page="1" class="first">首页</a>`;
  110.     // 页码
  111.     for (let i = 1; i <= pages; i++) {
  112.         pageBtn += `<a href="javascript:;" data-page="${i}" class="${i == page ? 'active' : ''}">${i}</a>`;
  113.     }
  114.     // 下一页、尾页
  115.     let next = page + 1;
  116.     if (next >= pages) {
  117.         next = pages;
  118.     }
  119.     pageBtn += `<a href="" data-page="${pages}" class="first">尾页</a>
  120.                 <a href="" data-page="${next}" class="next">&gt;</a>`;
  121.     paginate.innerHTML = pageBtn;
  122.     const aBtn = document.querySelectorAll('.paginate a');
  123.     Array.from(aBtn).forEach(item => item.addEventListener('click', ev => {
  124.         ev.preventDefault();
  125.         getList(ev.target.dataset.page);
  126.     }));
  127. }
  • css样式

下面是页面的css样式：

  • table.css
  1. .container {
  2.     text-align: center;
  3.     width: 100%;
  4.     text-align: center;
  5. }
  7. .box {
  8.     display: inline-block;
  9. }
  11. table {
  12.     border-left: 1px solid #e6e6e6;
  13.     border-top: 1px solid #e6e6e6;
  14.     color: #666;
  15.     font-size: 14px;
  16.     margin: 10px auto 0;
  17. }
  19. table caption {
  20.     font-size: 1.5rem;
  21.     margin: .5em;
  22. }
  24. td {
  25.     border: 1px solid #e6e6e6;
  26.     border-top: none;
  27.     border-left: none;
  28.     text-align: center;
  29.     padding: 0 15px;
  30.     height: 38px;
  31. }
  33. thead tr {
  34.     background-color: #f2f2f2;
  35. }
  37. thead tr td {
  38.     font-weight: 400;
  40. }
  42. tbody tr {
  43.     border-left: 1px;
  44. }
  46. /* btn */
  47. .btn {
  48.     padding: 0 5px;
  49.     height: 22px;
  50.     line-height: 22px;
  51.     background-color: #009688;
  52.     border-radius: 2px;
  53.     cursor: pointer;
  54.     text-decoration: none;
  55.     color: #fff;
  56.     font-size: 12px;
  57.     display: inline-block;
  58. }
  60. .del {
  61.     background-color: #FF5722;
  62. }
  64. .paginate {
  65.     padding: 7px 7px 0;
  66.     margin: 0 auto;
  67.     text-align: left;
  68. }
  70. .paginate a {
  71.     height: 26px;
  72.     line-height: 26px;
  73.     padding: 0 12px;
  74.     color: #333;
  75.     font-size: 12px;
  76.     text-decoration: none;
  77.     display: inline-block;
  79. }
  81. .paginate a.active {
  82.     background-color: #009688;
  83.     border-radius: 2px;
  84.     color: #fff;
  85. }
  • dialog.css (编辑界面的样式)
  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4.     box-sizing: border-box;
  5.     position: relative;
  6. }
  7. header, footer {
  8.     height: 8vh;
  9.     display: flex;
  10.     justify-content: space-between;
  11.     align-items: center;
  12.     padding: 0 0.5em;
  13.     background-color: #000;
  14.     color: #ffffff;
  15. }
  16. /* 按钮 */
  17. button {
  18.     width: 10em;
  19.     height: 2em;
  20.     line-height: 2em;
  21.     text-align: center;
  22.     color: #fff;
  23.     font-size: 0.8em;
  24.     border: none;
  25.     background-color: #1881ec;
  26.     border-radius: 2px;
  27.     cursor: pointer;
  28.     transition: all 0.3s;
  29. }
  30. button:hover {
  31.     cursor: pointer;
  32.     opacity: 0.8;
  33. }
  34. /* 模态框 */
  35. .modal {
  36.     height: calc(84vh - 1em);
  37.     margin: 0.5em 0;
  38. }
  39. /* 模态框背景 */
  40. .modal .modal-bg {
  41.     position: fixed;
  42.     left: 0;
  43.     top: 0;
  44.     width: 100%;
  45.     height: 100%;
  46.     background-color: #000;
  47.     opacity: 0.3;
  48.     z-index: 98;
  49. }
  50. .modal .modal-group {
  51.     position: fixed;
  52.     width: 28em;
  53.     height: 23em;
  54.     left: 50%;
  55.     margin-left: -14em;
  56.     margin-top: 5em;
  57.     background-color: #666;
  58.     z-index: 99;
  59. }
  60. .modal .modal-group .hd-wrap {
  61.     margin: 1em;
  62.     height: 2em;
  63. }
  64. .modal .modal-group .bd-wrap {
  65.     padding: 0 1em 1em
  66. }
  67. .modal .modal-group .bd-wrap .box {
  68.     display: flex;
  69.     height: calc(20em - 5em);
  70.     flex-flow: column nowrap;
  71. }
  72. .modal .modal-group .bd-wrap .box .input {
  73.     height: 2em;
  74.     display: flex;
  75.     justify-content: flex-start;
  76.     align-items: center;
  77.     margin-bottom: 1em;
  78. }
  79. .modal .modal-group .bd-wrap .box .input label {
  80.     width: 4em;
  81.     text-align: left;
  82. }
  83. .modal .modal-group .bd-wrap .box .input input
  84. {
  85.     width: calc(100% - 4em);
  86.     height: 2em;
  87.     line-height: 2em;
  88.     border: 1px solid #e6e6e6;
  89.     padding: 0 10px;
  90.     font-size: 14px;
  91.     border-radius: 2px;
  92. }
  93. .modal .modal-group .bd-wrap .box .input input.captcha {
  94.     width: 30%;
  95. }
  96. /* 登录按钮 */
  97. .btn-wrap {
  98.     display: flex;
  99.     align-items: center;
  100.     justify-content: center;
  101. }
  103. .btn-wrap button {
  104.     width: 12em;
  105. }
  106. .btn-wrap button.cancel-button {
  107.     margin-left: 1em;
  108. }
  109. .btn-wrap button.submit-button {
  110.     background-color: #009688;
  111. }
  113. .modal .modal-group .bd-wrap .box .submit-button{
  114.     width: 100%;
  115. }
  • 效果图：

默认样式

  • getList.php代码
  1. <?php
  2. // 引入数据库连接
  3. require 'database/connect.php';
  4. // 每页数量
  5. $num = 5;
  6. // 当前页数，该值是从客户端传递过来的，默认是当前页
  7. $page = $_GET['p'] ?? 1;
  8. // 计算当前页的起始偏移量
  9. $offset = ($page - 1) * $num;
  10. // 查询数据总页数
  11. $sql = "SELECT CEIL(COUNT(1)/{$num}) AS total FROM `staffs` WHERE `status` = 1";
  12. // 生成预处理对象
  13. $stmt = $pdo->prepare($sql);
  14. $stmt->execute();
  15. // $stmt->debugDumpParams();
  16. // 获取分页的总页数
  17. $pages = $stmt->fetch()['total'];
  19. // 每页显示的数据
  20. $sql = "SELECT * FROM `staffs` WHERE `status` = 1 LIMIT {$offset}, {$num}";
  21. $stmt = $pdo->prepare($sql);
  22. $stmt->execute();
  23. $staffs = $stmt->fetchAll();
  24. echo json_encode(["pages" => $pages, "page" => $page, "staffs" => $staffs]);
  • edit.php代码
  1. <?php
  2. require __DIR__ . '/database/connect.php';
  4. // 根据id获取员工信息
  5. $sql = "SELECT * FROM `staffs` WHERE `uid` = {$_GET['uid']}";
  6. $stmt = $pdo->prepare($sql);
  7. $stmt->execute();
  8. $staff = $stmt->fetch();
  9. // print_r($staff);
  10. ?>
  11. <!DOCTYPE html>
  12. <html lang="en">
  13. <head>
  14.     <meta charset="UTF-8">
  15.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  16.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  17.     <title>修改员工信息</title>
  18.     <link rel="stylesheet" href="./static/css/dialog.css">
  19.     <script src="./static/js/table.js"></script>
  20. </head>
  21. <body>
  22.     <div class="modal">
  23.         <div class="modal-group">
  24.             <form name="form">
  25.                 <div class="hd-wrap">
  26.                     <h2>员工信息修改</h2>
  27.                     <hr>
  28.                 </div>
  29.                 <div class="bd-wrap">
  30.                     <div class="box login-box">
  31.                         <div class="input input-box">
  32.                             <label for="username">姓名</label><input id="username" class="username" name="name"
  33.                                 type="text" value="<?=$staff['name']?>" placeholder="请输入姓名" autofocus="" autocomplete="off">
  34.                         </div>
  35.                         <div class="input input-box">
  36.                             <label for="password">年龄</label><input id="age" class="age" name="age" type="text"
  37.                             value="<?=$staff['age']?>" placeholder="请输入年龄" autofocus="" autocomplete="off">
  38.                         </div>
  39.                         <div class="input input-box">
  40.                             <label for="gender">性别</label><input id="gender" class="gender" name="gender"
  41.                             value="<?=$staff['gender']?>"    type="text" placeholder="请输入性别" autofocus="" autocomplete="off">
  42.                         </div>
  43.                         <div class="input input-box">
  44.                             <label for="salary">工资</label><input id="salary" class="salary" name="salary"
  45.                             value="<?=$staff['salary']?>"    type="text" placeholder="请输入验证码" autofocus="" autocomplete="off">
  46.                         </div>
  47.                         <div class="input input-box">
  48.                             <label for="email">邮箱</label><input id="email" class="email" name="email"
  49.                             value="<?=$staff['email']?>"    type="text" placeholder="请输入密码" autofocus="" autocomplete="off">
  50.                         </div>
  51.                         <div class="input input-box">
  52.                             <label for="birthday">生日</label><input id="birthday" class="birthday" name="birthday"
  53.                             value="<?=$staff['birthday']?>"    type="date" placeholder="请填写出生日期" autofocus="" autocomplete="off">
  54.                         </div>
  55.                         <button class="submit-button" type="button">提交</button>
  56.                     </div>
  57.                 </div>
  58.             </form>
  59.         </div>
  60.     </div>
  61. </body>
  62. </html>
  63. <script>
  64.     const submit = document.querySelector('.submit-button');
  65.     const form = document.forms.form;
  66.     const tableBody = document.querySelector('.tableBody');
  67.     // console.log(submit);
  68.     submit.onclick = ev => {
  69.         // 获取当前url地址 ? 后面的值
  70.         const url = location.search;
  71.         console.log(url);
  72.         let strs = '';
  73.         if (url.indexOf("?") !== -1) {
  74.             let str = url.substr(1);
  75.             strs = str.split('&');
  76.             console.log(strs);
  77.         }
  78.         let p = strs[0].split('=')[1];
  79.         let uid = strs[1].split('=')[1];
  80.         // console.log(p, uid);
  81.         // 1. 创建xhr对对象
  82.         let xhr = new XMLHttpRequest;
  83.         // 2. 配置xhr
  84.         // http://localhost:8888/PHP/20210225/paginate/api.php?actions=edit
  85.         xhr.open('post', `api.php?actions=update&p=${p}&uid=${uid}`);
  86.         xhr.responseType = 'json';
  87.         // 3. 处理xhr响应
  88.         // 成功
  89.         xhr.onload = () => {
  90.             console.log(xhr.response);
  91.             if(xhr.response.status === 1) {
  92.                 alert(xhr.response.msg);
  93.                 location.href="../index.php";
  94.             }
  95.         };
  96.         // 失败
  97.         xhr.onerror = () => {
  98.             tableBody.innerHTML = 'Error';
  99.         };
  100.         // 4. 发送xhr请求
  101.         xhr.send(new FormData(form));
  102.     };
  103. </script>
  • api.php代码
  1. <?php
  2. // 引入数据库连接
  3. require __DIR__ . '/database/connect.php';
  4. $actions = $_GET['actions'];
  5. // 将获取的id转换成整型
  6. $uid = intval($_GET['uid']);
  7. switch ($actions) {
  8.     case 'update':
  9.         $sql = <<< SQL
  10.         UPDATE staffs 
  11.         SET `name`=:name, `age`=:age, `gender`=:gender, `salary`=:salary, `email`=:email, `birthday`=:birthday
  12.         WHERE uid = {$uid};
  13.         SQL;
  14.         $stmt = $pdo->prepare($sql);
  15.         $stmt->execute($_POST);
  16.         // $stmt->debugDumpParams();
  17.         if ($stmt->rowCount() == 1) {
  18.             echo json_encode(['status' => 1, 'msg' => '更新成功，正在跳转...']);
  19.             // echo '<script>alert(\'修改成功\');window.location.href="../index.php?p='.$_GET['p'].'"</script>';
  20.         } else {
  21.             echo json_encode(['status' => 0, 'msg' => '更新失败，请重试...']);
  22.         }
  23.         break;
  24.     case 'del':
  25.         $sql = "UPDATE `staffs` SET `status` = 0 WHERE `uid` = ?";
  26.         $stmt = $pdo->prepare($sql);
  27.         $stmt->execute([$uid]);
  28.         if ($stmt->rowCount() == 1) {
  29.             echo json_encode(['status' => 1, 'msg' => '删除成功，正在跳转...']);
  30.         } else {
  31.             echo json_encode(['status' => 0, 'msg' => '删除失败，请重试...']);
  32.         }
  33.         break;
  34.     default:
  35.         die('不合法的操作！');
  36. }

项目线上体验地址：AJAX无刷新分页

上一条：构造函数、原型、dom基础下一条：解构赋值与流程控制
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多