亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 145
粉絲 7
評(píng)論 7
訪問量 198520
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
PHP數(shù)據(jù)庫(kù)實(shí)操：無刷新分頁和編輯刪除功能
李東亞1??3????12?
原創(chuàng)
1263人瀏覽過

一、無刷新分頁

1.實(shí)現(xiàn)原理：前端通過ajax請(qǐng)求獲取服務(wù)器數(shù)據(jù)，再由JS把數(shù)據(jù)組成html渲染到頁面中
2.服務(wù)器php代碼（獲取分頁數(shù)據(jù)信息）

  1. <?php
  3. require('connection.php');//鏈接數(shù)據(jù)庫(kù)操作
  5. //獲取當(dāng)前數(shù)據(jù)記錄總條數(shù)
  6. $sql="select count(*) as 'nums' from v_staffs;";
  7. $stmt=$pdo->prepare($sql);
  8. $stmt->execute();
  9. $result=$stmt->fetch();
  10. // var_dump($result);
  11. $nums=$result['nums'];
  12. $num=10;//每頁顯示記錄數(shù)
  13. $pages=ceil($nums/$num);//獲取總頁數(shù)
  14. // echo $pages;
  17. // 獲取當(dāng)前分頁的數(shù)據(jù)記錄信息
  18. $sql='select * from v_staffs limit ?,?;';
  20. // echo $_GET['p'];
  21. $page=$_GET['p']??1;//頁碼數(shù)
  22. $start=($page-1)*$num;//通過頁碼數(shù)獲取起始記錄數(shù)
  23. $stmt=$pdo->prepare($sql);
  25. $stmt->bindParam(1,$start,PDO::PARAM_INT);
  26. $stmt->bindParam(2,$num,PDO::PARAM_INT);
  28. $stmt->execute();
  30. // echo print_r($stmt->fetchAll(),true);
  32. $rows=$stmt->fetchAll(); 
  33. $res=['data'=>$rows,'pages'=>$pages];
  34. echo json_encode($res);
  35. // return json_encode($rows);

2.前端js獲取數(shù)據(jù)請(qǐng)求和頁面渲染

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>員工信息表(無刷新分頁)</title>
  9.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  10. </head>
  12. <body>
  13.     <main>
  14.         <table border="1" cellpadding='3' cellspacing='0'>
  15.             <caption>員工信息表</caption>
  16.             <tr id="title">
  17.                 <th>編號(hào)</th>
  18.                 <th>姓名</th>
  19.                 <th>年齡</th>
  20.                 <th>性別</th>
  21.                 <th>工資</th>
  22.                 <th>郵箱</th>
  23.                 <th>職位</th>
  24.                 <th>負(fù)責(zé)區(qū)域</th>
  25.                 <th>操作</th>
  26.             </tr>
  28.         </table>
  29.         <!--頁碼部分 -->
  30.         <div id='page'>
  32.         </div>
  33.     </main>
  34. </body>
  35. <script>
  36.     //頁面主體內(nèi)容獲取和生成函數(shù)
  37.     function getrows(data) {
  38.     //如果頁面已經(jīng)記錄信息需要移除
  39.         if ($($("table>tbody")[0]).children().length > 1) {
  40.             $($("table>tbody")[0]).children().remove("tr:not(#title)");
  41.         };
  42.         //生成html內(nèi)容
  43.         var content = "";
  44.         data.forEach((item) => {
  45.             content += `<tr>
  46.                     <td>${item["id"]}</td>
  47.                     <td>${item["name"]}</td>
  48.                     <td>${item["age"]}</td>
  49.                     <td>${item["gender"]}</td>
  50.                     <td>${item["salary"]}</td>
  51.                     <td>${item["email"]}</td>
  52.                     <td>${item["postion"]}</td>
  53.                     <td>${item["area"]}</td>
  54.                     <td><button><a href="http://php.edu/test/edit.php?id=${item["id"]}" target="_blank">編輯</a></button><button class="delete" data-index="${item["id"]}">刪除</button></td>
  55.                     </tr>
  56.                     `;
  57.         });
  58.         //渲染到頁面中取
  59.         $('#title').after(content);
  60.     }
  61. //生成分條條函數(shù)
  62.     function getpage(pages) {
  63.     //如果沒有分頁條則生成
  64.         if ($("#page").children().length == 0) {
  65.             var plink = "<span>首頁</span><span>&lt</span>";
  66.             for (var i = 1; i <= pages; i++) {
  67.                 plink += `<span>${i}</span>`;
  68.             }
  69.             plink += "<span>&gt;</span><span>尾頁</span>"
  70.                 // console.log(plink);
  71.             $("#page").append(plink);
  72.         }
  73.         // console.log($("#page").children().length);
  75.     }
  76. //ajax獲取數(shù)據(jù)信息函數(shù)
  77.     function getdata(page) {
  78.         $.ajax({
  79.             type: 'GET',
  80.             url: 'http://php.edu/test/staffs_api.php',
  81.             data: {
  82.                 p: page
  83.             },
  84.             dataType: 'json',
  85.             success: function(res) {
  86.                 // console.log(res);
  87.                 var data = res['data'];
  88.                 var pages = res['pages'];
  89.                 // console.log(data, pages);
  90.                 //調(diào)用函數(shù)生成頁面信息
  91.                 getrows(data);
  92.                 getpage(pages);
  94.             }
  95.         });
  96.     }
  97. //首次打開頁面默認(rèn)獲取首頁數(shù)據(jù)信息并展示
  98.     window.onload = function() {
  99.         getdata(1);
  100.     }
  101. //通過委托事件實(shí)現(xiàn)翻頁（上一頁下一頁功能沒有實(shí)現(xiàn)）
  102.     $('#page').click(function(ev) {
  103.         // console.log(ev.target.textContent, ev.currentTarget);
  104.         var currentpage = ev.target.textContent;
  106.         switch (currentpage) {
  107.             case "首頁":
  108.                 getdata(1);
  109.                 break;
  110.             case "尾頁":
  111.                 var count = $(ev.currentTarget).children().length - 4;
  112.                 getdata(count);
  113.                 break;
  114.             case "<":
  115.                 console.log('上一頁');
  116.                 break;
  117.             case ">":
  118.                 console.log("下一頁");
  119.                 break;
  120.             default:
  121.                 getdata(currentpage);
  122.         }
  124.     });
  125.     //刪除數(shù)據(jù)功能，通過ajaxComplete()函數(shù)來獲取動(dòng)態(tài)生成的信息
  126.     $(document).ajaxComplete(function() {
  127.         // console.log($('.delete'));
  128.         $('.delete').click(function(ev) {
  129.             var id = $(ev.target).data("index");
  130.             // console.log(id);
  131.             if (window.confirm("確定刪除嗎？")) {
  132.                 $.ajax({
  133.                     type: 'GET',
  134.                     url: 'http://php.edu/test/delete.php',
  135.                     data: {
  136.                         id: id
  137.                     },
  138.                     dataType: 'json',
  139.                     success: function(res) {
  140.                         if (res[0] > 0) {
  141.                             return alert("刪除成功");
  142.                         } else {
  143.                             return alert("刪除失敗");
  144.                         }
  145.                     }
  146.                 });
  147.                 window.location.reload();
  148.             } else {
  149.                 return false;
  150.             }
  151.         });
  152.     });
  153. </script>
  154. <style>
  155.     main {
  156.         width: 1000px;
  157.         margin: 10px auto;
  158.     }
  160.     table {
  161.         width: 1000px;
  162.     }
  164.     #page {
  165.         margin-top: 10px;
  166.         width: 1000px;
  167.         display: flex;
  168.         justify-content: space-around;
  169.     }
  171.     #page>span {
  172.         width: 46px;
  173.         height: 20px;
  174.         background-color: lightgray;
  175.         /* border: 1px solid black; */
  176.         text-align: center;
  177.         color: whitesmoke;
  178.         line-height: 20px;
  179.     }
  181.     #page>span:hover {
  182.         cursor: pointer;
  183.         background-color: white;
  184.         color: red;
  185.     }
  187.     th,
  188.     td {
  189.         text-align: center;
  190.     }
  191. </style>
  193. </html>

二、編輯功能

（一）功能實(shí)現(xiàn)原理
1.通過分頁的編輯按鈕獲取要編輯數(shù)據(jù)記錄的id,然后通過編輯頁面把要編輯的記錄顯示出來，
2.通過ajax獲取新的數(shù)據(jù)，通過id,更新信息
（二）實(shí)現(xiàn)代碼
1.前端代碼

  1. <?php
  3. include('connection.php');
  5. $sql="select * from v_staffs where id=:id;";
  7. $stmt=$pdo->prepare($sql);
  8. $id=$_GET["id"];
  9. $stmt->bindParam(':id',$id,PDO::PARAM_INT);
  11. $stmt->execute();
  12. // $stmt->debugDumpParams();
  13. $row=$stmt->fetch();
  14. // var_dump($row);
  15. // exit();
  16. ?>
  18. <!DOCTYPE html>
  19. <html lang="en">
  20. <head>
  21.     <meta charset="UTF-8">
  22.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  23.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  24.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  25.     <title>員工信息修改</title>
  26. </head>
  27. <body>
  28. <body>
  29.     <table border="1" cellpadding='3' cellspacing='0'>
  30.     <caption>修改員工信息</caption>
  31.     <tr>
  32.         <th>編號(hào)</th>
  33.         <th>姓名</th>
  34.         <th>年齡</th>
  35.         <th>性別</th>
  36.         <th>工資</th>
  37.         <th>郵箱</th>
  38.     </tr>
  39.     <tr>
  40.         <td id="id"><?= $row["id"] ?></td>
  41.         <td><input type="text" name="name" value="<?= $row["name"] ?>"></td>
  42.         <td><input type="text" name="age" value="<?= $row["age"] ?>"></td>
  43.         <td><input type="text" name="gender" value="<?= $row["gender"] ?>"></td>
  44.         <td><input type="text" name="salary" value="<?= $row["salary"] ?>"></td>
  45.         <td><input type="text" name="email" value="<?= $row["email"] ?>"></td>
  46.     </tr>
  47.     </table>
  48.     <button id="update">提交</button>
  49. </body>
  50. <script>
  51.     $("#update").click(function(){
  52.         $.ajax({
  53.             type: 'POST',
  54.             url: 'http://php.edu/test/update.php',
  55.             data: {
  56.             //獲取新數(shù)據(jù)
  57.                 name: $("[name='name']").val(),
  58.                 age:$("[name='age']").val(),
  59.                 gender:$("[name='gender']").val(),
  60.                 salary:$("[name='salary']").val(),
  61.                 email:$("[name='email']").val(),
  62.                 id:$("#id").text()
  63.             },
  64.             dataType: 'json',
  65.             success: function(res) {
  66.             //確認(rèn)更新成功
  67.                 alert(res[1]);
  68.                 window.close();//關(guān)閉窗口
  69.             }
  70.         });
  71.     });
  73. </script>
  74. </html>

2.后端代碼

  1. <?php
  3. include('connection.php');
  5. $sql="update staffs set name=?,age=?,gender=?,salary=?,email=? where id=?;";
  7. $stmt=$pdo->prepare($sql);
  8. $stmt->execute([$_POST['name'],$_POST["age"],$_POST["gender"],$_POST["salary"],$_POST["email"],$_POST['id']]);
  9. // $stmt->debugDumpParams();
  10. if($stmt->rowCount()>0){
  11.     echo json_encode([$stmt->rowCount(),"更新成功"]);
  12. }else{
  13.     echo json_encode([0,"更新失敗"]);
  14. }

運(yùn)行效果圖

批改老師：天蓬老師天蓬老師

批改狀態(tài)：合格

老師批語：
本博文版權(quán)歸博主所有，轉(zhuǎn)載請(qǐng)注明地址！如有侵權(quán)、違法，請(qǐng)聯(lián)系admin@php.cn舉報(bào)處理！
全部評(píng)論 文明上網(wǎng)理性發(fā)言，請(qǐng)遵守新聞評(píng)論服務(wù)協(xié)議
0條評(píng)論
關(guān)于我們 免責(zé)申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長(zhǎng)！
關(guān)注服務(wù)號(hào) 技術(shù)交流群
PHP中文網(wǎng)訂閱號(hào)
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時(shí)隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號(hào)
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學(xué)習(xí)！
    全站2000+教程免費(fèi)學(xué)