search

博客列表 >Ajax数据异步加载、无刷新分页、编辑与删除功能

Ajax数据异步加载、无刷新分页、编辑与删除功能

吳
吳 原创
2021年03月03日 12:37:04977浏览

ajax无刷新分页与编辑删除功能

  • 无刷新分页

  • 删除功能

删除前：

删除后：

  • 编辑功能

编辑前：用户ID43

编辑后：用户ID43

  • 文件：index.php
  1. <?php
  2. session_start();
  3. ?>
  4. <!DOCTYPE html>
  5. <html lang="en">
  7. <head>
  8.     <meta charset="UTF-8">
  9.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  10.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  11.     <title>用户管理系统</title>
  12.     <link rel="stylesheet" href="style.css">
  13. </head>
  15. <body>
  16.     <table>
  17.         <caption>用户管理 <span class="tips" style="color:red;font-size:10px;"></span></caption>
  19.         <thead>
  20.             <tr>
  21.                 <td>UID</td>
  22.                 <td>用户名</td>
  23.                 <td>邮箱</td>
  24.                 <td>注册时间</td>
  25.                 <td>操作</td>
  26.             </tr>
  27.         </thead>
  28.         <!-- 列表渲染 -->
  29.         <tbody></tbody>
  30.     </table>
  31.     <!-- 分页渲染 -->
  32.     <p></p>
  34.     <!-- 模态框编辑 -->
  35.     <div class="md">
  36.         <div class="md-drop"></div>
  37.         <div class="md-body">
  38.             <button class="close">关闭</button>
  39.             <form action="" name="editform">
  40.                 <h2>编辑用户</h2>
  41.                 <div class="md-login">
  42.                     <label for="name">姓名：</label>
  43.                     <input type="text" name="name" id="name" value="">
  44.                     <label for="email">邮箱：</label>
  45.                     <input type="email" name="email" id="email" value="">
  46.                     <button class="save">保存</button>
  47.                 </div>
  48.             </form>
  49.         </div>
  50.     </div>
  51.     <!-- 模态框样式 -->
  52.     <style>
  53.         /* 模态框初始化隐藏 */
  54.         .md {
  55.             display: none;
  56.         }
  58.         /* 遮罩层 */
  59.         .md .md-drop {
  60.             position: fixed;
  61.             background-color: rgb(0, 0, 0, .5);
  62.             top: 0;
  63.             left: 0;
  64.             right: 0;
  65.             bottom: 0;
  66.         }
  68.         .md .md-body {
  69.             position: fixed;
  70.             background-color: lightcyan;
  71.             padding: 1em;
  72.             overflow: hidden;
  73.             max-width: 25em;
  74.             max-height: 20em;
  75.             /* 水平垂直居中 */
  76.             top: 0;
  77.             left: 0;
  78.             right: 0;
  79.             bottom: 0;
  80.             margin: auto;
  81.             border-radius: 10px;
  82.         }
  84.         /* 关闭按钮 */
  85.         .md .md-body .close {
  86.             float: right;
  87.             height: 2.5em;
  88.             width: 3em;
  89.             border: 0;
  90.             border-radius: 0.5em;
  91.             outline: none;
  92.             background-color: rgb(1, 231, 135);
  93.         }
  95.         .md .md-login {
  96.             display: grid;
  97.             gap: 1em;
  98.             margin-top: 20px;
  99.         }
  100.     </style>
  101.     <script src="ajax.js"></script>
  102. </body>
  104. </html>
  • css样式文件：style.css
  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4.   box-sizing: border-box;
  5.   color: #555;
  6. }
  8. body {
  9.   display: flex;
  10.   flex-direction: column;
  11.   align-items: center;
  12. }
  14. /*表格样式*/
  15. table {
  16.   width: 90%;
  17.   border: 1px solid;
  18.   border-collapse: collapse;
  19.   text-align: center;
  20. }
  22. table caption {
  23.   font-size: 1.2rem;
  24.   margin: 10px;
  25. }
  26. table td,
  27. table th {
  28.   border: 1px solid;
  29.   padding: 5px;
  30. }
  32. table tr:hover {
  33.   background-color: #eee;
  34. }
  36. table thead tr:only-of-type {
  37.   background-color: lightcyan;
  38. }
  40. table button {
  41.   width: 56px;
  42.   height: 26px;
  43. }
  44. table button:last-of-type {
  45.   color: red;
  46. }
  47. table button {
  48.   cursor: pointer;
  49.   margin: 0 3px;
  50. }
  51. /*分页条样式*/
  52. body > p {
  53.   display: flex;
  54. }
  56. p > a {
  57.   text-decoration: none;
  58.   color: #555;
  59.   border: 1px solid #888;
  60.   padding: 5px 10px;
  61.   margin: 10px 2px;
  62. }
  64. .active {
  65.   background-color: seagreen;
  66.   color: white;
  67.   border: 1px solid seagreen;
  68. }
  • 文件：ajax.js
  1. // 页面载入完成时渲染第一页数据
  2. window.onload = function () {
  3.     select(1);
  4. };
  7. // 编辑
  8. document.querySelector('table:first-of-type tbody').addEventListener('click' , ev => {
  9.     // 获取记录id
  10.     const sid = ev.target.parentNode.parentNode.querySelector('td').textContent * 1;
  11.     const tips = document.querySelector('.tips');
  12.     // 操作类型
  13.     switch (ev.target.textContent) {
  14.         case '编辑':
  15.             // 显示模态框
  16.             document.querySelector('.md').style.display = 'block';
  17.             // 点击关闭按钮
  18.             document.querySelector('.md .close').addEventListener('click',(eve) => {
  19.                 document.querySelector('.md').style.display = 'none';
  20.             });
  21.             // 点击模态框之外区域
  22.             document.querySelector('.md .md-drop').addEventListener('click',(eve) => {
  23.                 document.querySelector('.md').style.display = 'none';
  24.             });
  26.             // 获取数据
  27.             let name = ev.target.parentNode.parentNode.querySelector('td:nth-of-type(2)').textContent;
  28.             let email = ev.target.parentNode.parentNode.querySelector('td:nth-of-type(3)').textContent;
  30.             // 渲染到模态框
  31.             document.getElementById('name').value = name;
  32.             document.getElementById('email').value = email;
  34.             // 编辑事件
  35.             document.querySelector('.md .save').addEventListener('click',(eve) => {
  36.                 // 禁止默认提交
  37.                 eve.preventDefault();
  38.                 // 获取模态框数据
  39.                 name = document.getElementById('name').value;
  40.                 email = document.getElementById('email').value;
  42.                 // 创建对象
  43.                 let xhr = new XMLHttpRequest();
  44.                 // 配置参数
  45.                 xhr.open('post','api.php?action=update&sid=' + sid);
  46.                 xhr.responseType = 'json';
  47.                 // 处理请求
  48.                 xhr.onload = () => {
  49.                     // 更新数据写会页面
  50.                     tips.innerHTML = xhr.response.msg;
  51.                     if (xhr.response.status === 1 ) {
  52.                         document.querySelector('.md').style.display = 'none';
  53.                         ev.target.parentNode.parentNode.querySelector('td:nth-of-type(2)').textContent = name;
  54.                         ev.target.parentNode.parentNode.querySelector('td:nth-of-type(3)').textContent = email;
  55.                         setTimeout(() => tips.innerHTML = null,2000);
  56.                     }
  57.                 };
  58.                 xhr.send(new FormData(document.forms.namedItem('editform')));
  59.             });
  60.             break;
  61.         case '删除':
  62.             if (confirm('确认删除UID：' + sid + '用户？')) {
  63.                 // 创建对象
  64.                 let xhr = new XMLHttpRequest();
  65.                 // 配置参数
  66.                 xhr.open('get','api.php?action=delete&sid=' + sid);
  67.                 xhr.responseType = 'json';
  68.                 // 处理请求
  69.                 xhr.onload = () => {
  70.                     tips.innerHTML = xhr.response.msg;
  71.                     if (xhr.response.status === 1) {
  72.                     // 删除节点
  73.                     ev.target.parentNode.parentNode.remove();
  74.                     setTimeout(() => tips.innerHTML = null,2000);
  75.                     }
  77.                 };
  78.                 // 发送请求
  79.                 xhr.send(null);
  80.             }
  81.             break;
  82.    }
  83. })
  85. function select(page = 1) {
  86.     // 创建对象
  87.     const xhr = new XMLHttpRequest();
  88.     // 配置参数
  89.     xhr.open('get', 'api.php?action=select&page=' + page);
  90.     // 处理请求
  91.     xhr.onload = () => {
  92.         // console.log(xhr.response);
  93.         let res = JSON.parse(xhr.response);
  94.         let pages = res.pages;
  95.         let users = res.users;
  96.         // 渲染数据
  97.         document.querySelector('table:first-of-type tbody').innerHTML = get_datas(users);
  98.         // 渲染分页
  99.         document.querySelector('p:first-of-type').innerHTML = pags(page,pages);
  100.     }
  101.     // 发送请求
  102.     xhr.send(null);
  103. }
  105. // 渲染数据
  106. function get_datas(datas) {
  107.     let str = '';
  108.     for (let i = 0; i < datas.length; i++) {
  109.         str += '<tr>';
  110.         str += '<td>' + datas[i]['sid'] + '</td>';
  111.         str += '<td>' + datas[i]['name'] + '</td>';
  112.         str += '<td>' + datas[i]['email'] + '</td>';
  113.         str += '<td>' + datas[i]['create_at'] + '</td>';
  114.         str += '<td><button>编辑</button><button>删除</button></td>';
  115.         str += '</tr>';
  116.     }
  117.     return str;
  118. }
  120. // 无刷新分页
  121. document.querySelector('p:first-of-type').addEventListener('click',ev => {
  122.     // 禁用默认跳转
  123.     ev.preventDefault();
  124.     // 点击当前激活页，无效点击
  125.     if (ev.target.classList.contains('active')) return;
  126.     // 去掉激活样式
  127.     [...ev.currentTarget.children].forEach(ele => ele.classList.remove('active'));
  128.     // 当前页添加激活样式
  129.     ev.target.classList.add('active');
  130.     let url = ev.target.href,page;
  131.     // 获取页码
  132.     if (url.indexOf('?') !== -1) {
  133.         page = url.split('=')[1];
  134.     } else {
  135.         page = 1;
  136.     }
  137.     select(page);
  138. })
  142. // 分页数据
  143. function pags (page = 1,pages) {
  144.     let pag = '';
  145.     let active = '';
  146.     // 首页和上一页
  147.     if (page <= 1) page =1;
  148.     if (page != 1) {
  149.         pag += '<a href="'+ document.URL + '?p=1">首页</a>';
  150.         pag += '<a href="'+ document.URL + '?p=' + Math.max(1,page - 1) +'">上一页</a>';
  151.     }
  152.     // 高亮分页
  153.     for (i = 1; i <= pages; i++ ) {
  154.         active = '';
  155.         if (page == i) active = 'class="active"';
  156.         pag += '<a href="' + document.URL + '?p=' + i + '"' + active + '>' + i + '</a>';
  157.     }
  159.     // 下一页和尾页
  160.     if (page >= pages) page = pages;
  161.     if (page !== pages) {
  162.         pag += '<a href="' + document.URL + '?p=' + Math.min(page + 1,pages) + '">下一页</a>'
  163.         pag += '<a href="' + document.URL + '?p=' + pages +'">尾页</a>'
  164.     }
  166.     return pag;
  167. }
  • 文件：api.php
  1. $config = [
  2.     'type' => 'mysql',
  3.     'host' => '127.0.0.1',
  4.     'dbname' => 'phpedu',
  5.     'username' => 'root',
  6.     'password' => '123456',
  7. ];
  8. extract($config);
  9. $dsn = sprintf('%s:host=%s;dbname=%s;',$type,$host,$dbname);
  10. try {
  11.     $pdo = new PDO($dsn,$username,$password);
  12.     // 设置结果集返回类型
  13.     $pdo->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE,PDO::FETCH_ASSOC);
  14.     // var_dump($pdo,'连接成功');
  15. } catch (PDOException $e){
  16.     die('连接失败:'. $e->getMessage());
  17. }
  19. // 页码通过get请求
  20. $page = $_GET['page'] ?? 1;
  21. $action = $_GET['action'] ?? 'select';
  23. switch ($action) {
  24.     // 查询
  25.     case 'select':
  26.         die(get_datas($pdo,$page));
  27.         break;
  28.     // 删
  29.     case 'delete':
  30.         die(del_data($pdo,$_GET['sid'] ?? 0));
  31.         break;
  32.     // 更新
  33.     case 'update':
  34.         $sid = $_GET['sid'] ?? 0;
  35.         $name = $_POST['name'];
  36.         $email = $_POST['email'];
  37.         die(update_data($pdo,$sid,$name,$email));
  38.         break;
  40. }
  42. // 更新
  43. function update_data($pdo,$sid,$name,$email) {
  44.     if ($sid) {
  45.         $sql = "UPDATE users SET name=:name, email=:email WHERE sid = :sid;";
  46.         $stmt = $pdo->prepare($sql);
  47.         $stmt->bindParam(':sid',$sid,PDO::PARAM_INT);
  48.         $stmt->bindParam(':name',$name,PDO::PARAM_STR);
  49.         $stmt->bindParam(':email',$email,PDO::PARAM_STR);
  50.         $stmt->execute();
  51.         if($stmt->rowCount() > 0) {
  52.             return json_encode(['status' => 1,'msg' => '更新成功!']);
  53.         }
  54.     }
  55.     return json_encode(['status' => 0,'msg' => '未知错误!']);
  56. }
  58. // 删除
  59. function del_data($pdo,$sid = 0) {
  60.     if ($sid) {
  61.         $sql = "DELETE FROM users WHERE sid = :sid;";
  62.         $stmt = $pdo->prepare($sql);
  63.         $stmt->bindParam(':sid',$sid,PDO::PARAM_INT);
  64.         $stmt->execute();
  65.         if ($stmt->rowCount() > 0) {
  66.             return json_encode(['status' => 1,'msg' => '删除成功!']);
  67.         }
  68.     }
  69.     return json_encode(['status' => 0,'msg' => '未知错误!']);
  70. }
  72. // 获取总页数
  73. function get_pages($pdo,$page = 1,$num = 5) {
  74.     // 总页数
  75.     $num = 5;
  76.     $offset = ($page - 1 ) * $num;
  77.     $sql = "SELECT CEIL(COUNT(1)/{$num}) total FROM users";
  78.     $pages = $pdo->query($sql)->fetch()['total'];
  79.     return $pages;
  80. }
  82. function get_datas($pdo,$page = 1, $num = 5) {
  83.     // 获取总页数
  84.     $pages = get_pages($pdo);
  85.     // 每页显示数据
  86.     $offset = ($page - 1) * $num;
  87.     $sql = "SELECT * FROM `users` LIMIT {$offset},{$num}";
  88.     $stmt = $pdo->prepare($sql);
  89.     $stmt->execute();
  90.     $users = $stmt->fetchAll();
  91.     $users = $pdo->query($sql)->fetchall();
  92.     return json_encode(['pages' => $pages, 'users' => $users]);
  93. }
上一条：用户管理加登录验证、注册、管理权限下一条：MYSQL数据库CURD中常用操作命令汇总及代码演示
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多