Community Learn Tools Library Leisure
search
English
Home > List of blog posts > front 24 jQuery事件绑定、Ajax获得数据，分页实战（0820thu）
Blogger Information
Blog 62
fans 2
comment 1
visits 42123
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
front 24 jQuery事件绑定、Ajax获得数据，分页实战（0820thu）
老黑
Original
587 people have browsed it

主要内容：

  1. jQuery事件绑定
  2. 7种获得获得数据的方式，包括Ajax
  3. 实战：Ajax-post无刷新分页技术

1. jQuery事件绑定

  • 通过事件绑定来进行匹对检验、提醒、提醒去除等
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>事件</title>
  7.   </head>
  8.   <body>
  9.     <p>User Login:</p>
  10.     <!-- onsubmit="return false": 禁用表单的默认提交行为 -->
  11.     <form style="width: 200px; display: grid; gap: 10px;">
  12.       <input type="text" placeholder="UserName" autofocus />
  13.       <input type="password" placeholder="Password" />
  14.       <button>Submit</button>
  15.     </form>
  16.     <script src="../220818/lib/jquery-3.5.1.js"></script>
  18.     <script>
  19.       // 事件绑定,绑定一个禁用当前默认操作的事件
  20.       $("form").submit(function (ev) {
  21.         ev.preventDefault();
  22.       });
  24.       // 用户名文本框应该是失去焦点的进行验证
  25.       var user = $('input[type="text"]');
  26.       // blur()失去焦点时触发
  27.       user.blur(function () {
  28.         // 提示
  29.         var tips = "";
  30.         // 用户名列表 - 这个按理是跟数据库中的比较的
  31.         var users = ["admin", "peter", "zhu"];
  33.         // 非空验证
  34.         if ($(this).val().length === 0) {
  35.           tips = "用户名不能为空";
  36.           // 焦点重新定位到用户名文本框上
  37.           $(this).focus();
  38.           // 存在验证,必须在非空验证完成之后才可进行，如果在列表中没有，index就会是-1
  39.         } else if (users.indexOf($(this).val()) === -1) {
  40.           tips = "用户名不存在" + '  <button type="button">请注册</button>';
  41.         } else {
  42.           tips = '<i style="color:green;">用户名正确<i>';
  43.           $("input[type=password]").focus();
  44.         }
  46.         // 将提示信息添加到页面
  47.         // 防止重复添加 - 因此需要现有一个检查，如果没有再添加
  48.         // 一旦重新的时候，需要再将信息（span）删除掉
  49.         if ($(this).next().get(0).tagName !== "SPAN") {
  50.           $("<span>").html(tips).css("color", "red").insertAfter($(this));
  51.         }
  52.         // 如果输入错误,用户修改的时候,应该将提示信息删除
  53.         // keyDown(): 当用户按下键盘时触发
  54.         // user.keydown(function () {
  55.         //   // remove()删除元素
  56.         //   // next():获取下一个兄弟元素
  57.         //   $(this).next("span").remove();
  58.         // });
  60.         // on(): 与原生  addEventListener()功能一样
  61.         user.on("input", function () {
  62.           $(this).next("span").remove();
  63.         });
  64.       });
  65.     </script>
  66.   </body>
  67. </html>

2. 7种获得获得数据的方式，包括Ajax

  • 中间用到的一个users.php
  1. <?php
  2. // 二维数组模拟数据表的查询结果
  3. $users = [
  4.     ['id' => 1, 'name' => '熊大', 'age' => 20],
  5.     ['id' => 2, 'name' => '熊二', 'age' => 18],
  6.     ['id' => 3, 'name' => '光头强', 'age' => 38],
  7. ];
  9. // $_REQUEST = $_GET + $_POST + $_COOKIE
  10. // $id = intval($_REQUEST['id']);
  11. if (in_array($_REQUEST['id'], array_column($users, 'id'))) {
  12.     foreach ($users as  $user) {
  13.         if ($user['id'] == $_REQUEST['id'] ) {
  14.             // vprintf('%s : %s %s 岁', $user);
  15.             // 除了json部分用下面这个外，其他都用上面的
  16.             // $_getJSON()返回返回json格式字符串
  17.             echo json_encode($user);
  18.         }
  19.     }
  20. } else {
  21.     echo '<span style="color: red">没有找到</span>';
  22. }
  • demo2.php
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Ajax</title>
  7.     <style>
  8.       body {
  9.         display: grid;
  10.         gap: 15px;
  11.       }
  12.       button {
  13.         text-align: left;
  14.         height: 26px;
  15.         width: 250px;
  16.         background-color: aquamarine;
  17.       }
  18.       button:hover {
  19.         background-color: #ddd;
  20.         cursor: pointer;
  21.       }
  22.     </style>
  23.   </head>
  24.   <body>
  25.     <button type="button">1. load()请求数据</button>
  26.     <button type="button">2. $.get()请求数据</button>
  27.     <button type="button">3. $.post()请求数据</button>
  28.     <button type="button">4. $.getJSON()请求JSON数据</button>
  29.     <button type="button">5. $.ajax()请求数据</button>
  30.     <button type="button">6. $.ajax()-jsonp-跨域请求数据1</button>
  31.     <button type="button">7. $.ajax()-jsonp-跨域请求数据2</button>
  32.     <script src="../220818/lib/jquery-3.5.1.js"></script>
  33.     <script>
  34.       // 1. $.load():获取html片断
  35.       $("button:first-of-type").click(function () {
  36.         $(this).after("<div>").next().load("nav.html");
  37.       });
  38.       // 将nva中的导航load过来
  40.       // 2. $.get()
  41.       $("button:nth-of-type(2)").click(function (ev) {
  42.         //   http://php.cn/users.php?id=2
  43.         // 与之前的data: xhr.responseText有类似的功能，可以祛暑
  44.         $.get("users.php", { id: 3 }, function (data) {
  45.           console.log(data);
  46.           //   console.log($(this)[0]);
  47.           console.log($(this) === $(ev.target));  
  48.           // 这个地方的this跟后面不等，因为从上面一行可以看出来this好像是一个字符串之类。
  49.           $(ev.target).after("<div>").next().html(data);
  50.         });
  51.       });
  53.       // 3. $.post()
  54.       $("button:nth-of-type(3)").click(function (ev) {
  55.         $.post("users.php", { id: 7 }, function (data) {
  56.           //   console.log(data);
  57.           $(ev.target).after("<div>").next().html(data);
  58.         });
  59.       });
  61.       // 4. $.getJSON()
  62.       $("button:nth-of-type(4)").click(function (ev) {
  63.         $.getJSON("users.php?id=3", function (data) {
  64.           // var data = JSON.parse(data);这步操作Jquery代劳了
  65.           // 我们操作的data已经是js对象
  66.           console.log(data);
  67.           var str = data.id + ": " + data.name + ", " + data.age + "岁";
  68.           $(ev.target).after("<div>").next().html(str);
  69.         });
  70.       });
  72.       // 5. $.ajax():终级杀器,只要掌握这一个就可以了
  73.       //   $.ajax({
  74.       //     // 请求类型
  75.       //     type: "GET",
  76.       //     // 请求的URL
  77.       //     url: url,
  78.       //     // 发送的数据
  79.       //     data: data,
  80.       //     // 希望服务器返回的类型
  81.       //     dataType: "json",
  82.       //     // 请求成功的回调
  83.       //     success: callback,
  84.       //   });
  86.       $("button:nth-of-type(5)").click(function (ev) {
  87.         //     $.get("users.php", { id: 2 }, function (data) {
  88.         //       console.log(data);
  89.         //       //   console.log($(this)[0]);
  90.         //       console.log($(this) === $(ev.target));
  91.         //       $(ev.target).after("<div>").next().html(data);
  92.         //     });
  94.         $.ajax({
  95.           type: "GET",
  96.           url: "users.php",
  97.           data: { id: 2 },
  98.           dataType: "html",
  99.           success: function (data) {
  100.             console.log(data);
  101.             $(ev.target).after("<div>").next().html(data);
  102.           },
  103.         });
  104.       });
  106.       // 6. $.ajax() - jsonp - 1
  107.       $("button:nth-of-type(6)").click(function (ev) {
  108.         $.ajax({
  109.           type: "get",
  110.           // jsonp=? ?是回调函数的占位符
  111.           url: "http://php.io/test2.php?jsonp=?&id=1",
  112.           // dataType: 返回类型必须是jsonp
  113.           dataType: "jsonp",
  114.           success: function (data) {
  115.             var data = JSON.parse(data);
  116.             console.log(data);
  117.           },
  118.         });
  119.       });
  121.       // 7. $.ajax() - jsonp - 2
  122.       $("button:last-of-type").click(function (ev) {
  123.         $.ajax({
  124.           type: "get",
  125.           // jsonp=? ?是回调函数的占位符
  126.           url: "http://php.io/test2.php?jsonp=?&id=1",
  127.           // dataType: 返回类型必须是jsonp
  128.           dataType: "jsonp",
  129.           jsonpCallback: "handle",
  130.         });
  131.       });
  133.       function handle(data) {
  134.         var data = JSON.parse(data);
  135.         console.log(data);
  136.         var data =
  137.           "<p>" +
  138.           data.title +
  139.           "</p><p>" +
  140.           data.user.name +
  141.           ",邮箱:" +
  142.           data.user.email +
  143.           "</p>";
  144.         $("button:last-of-type").after("<div>").next().html(data);
  145.       }
  146.     </script>
  147.   </body>
  148. </html>

3. Ajax-post无刷新分页技术

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Ajax-post无刷新分页技术</title>
  7.     <style>
  8.       table {
  9.         border-collapse: collapse;
  10.         border: 1px solid;
  11.         text-align: center;
  12.         margin: auto;
  13.         width: 500px;
  14.       }
  15.       table caption {
  16.         font-size: 1.2rem;
  17.         margin-bottom: 10px;
  18.       }
  19.       th,
  20.       td {
  21.         border: 1px solid;
  22.         padding: 5px;
  23.       }
  24.       thead tr:first-of-type {
  25.         background-color: #ddd;
  26.       }
  27.       p {
  28.         text-align: center;
  29.       }
  31.       p a {
  32.         text-decoration: none;
  33.         border: 1px solid;
  34.         padding: 0 8px;
  35.       }
  37.       .active {
  38.         background-color: #f00;
  39.       }
  40.     </style>
  41.   </head>
  42.   <body>
  43.     <table>
  44.       <caption>
  45.         用户信息表
  46.       </caption>
  47.       <thead>
  48.         <tr>
  49.           <th>id</th>
  50.           <th>姓名</th>
  51.           <th>年龄</th>
  52.           <th>性别</th>
  53.           <th>职位</th>
  54.           <th>手机号</th>
  55.         </tr>
  56.       </thead>
  57.       <tbody></tbody>
  58.     </table>
  59.     <!-- 分页条 -->
  60.     <p></p>
  61.     <script src="../0818/lib/jquery-3.5.1.js"></script>
  62.     <script>
  63.       // 默认是第一页
  64.       var page = 1;
  66.       // 默认显示的是第一页
  67.       getPageData(page);
  69.       // 获取分页数据的函数
  70.       function getPageData(page) {
  71.         $.ajax({
  72.           type: "post",
  73.           url: "page_data.php",
  74.           data: { page: page },
  75.           dataType: "json",
  76.           success: show,
  77.         });
  78.       }
  80.       // show()显示数据
  81.       function show(data) {
  82.         console.log(data);
  83.         // 将json中的数据解析出来填充到表格中
  84.         console.log(data.users);
  86.         // 1. 将当前面的数据渲染出来
  87.         var str = "";
  88.         data.users.forEach(function (user) {
  89.           str += "<tr>";
  90.           str += "<td>" + user.id + "</td>";
  91.           str += "<td>" + user.name + "</td>";
  92.           str += "<td>" + user.age + "</td>";
  93.           str += "<td>" + user.sex + "</td>";
  94.           str += "<td>" + user.position + "</td>";
  95.           str += "<td>" + user.mobile + "</td>";
  96.           str += "</tr>";
  97.         });
  98.         $("tbody").html(str);
  100.         // 2. 将分页条显示出来
  101.         var str = "";
  102.         for (var i = 1; i < data.pages; i++) {
  103.           str += '<a href="" data-index=' + i + ">" + i + "</a>";
  104.         }
  105.         $("p").html(str).find("a").first().addClass("active");
  107.         // 3. 添加分页点击事件
  108.         $("p a").click(function (ev) {
  109.           ev.preventDefault();
  110.           // 获取当前要显示的新页面,根据自定义属性
  111.           var page = $(this).attr("data-index");
  112.           //   $("tbody").html("");
  113.           getPageData(page);
  114.         });
  115.       }
  116.     </script>
  117.   </body>
  118. </html>
  • page_data.php
  1. <?php
  3. // 1. 连接数据库
  4. $pdo = new PDO('mysql:host=localhost;dbname=liangtest', 'liang', '123456');
  6. // 2. 获取页码
  7. $page = $_POST['page'] ?? 1;
  9. // 3. 每页显示数量
  10. $num = 8;
  12. // 4. 每页显示偏移量
  13. $offset = ($page - 1) * $num;
  15. // 5. 总页数
  16. $sql = "SELECT CEIL(COUNT(`id`)/{$num}) AS `total` FROM `shao`";
  17. // echo $sql;
  18. $pages = $pdo->query($sql)->fetch()['total'];
  19. // echo $pages;
  21. // 6. 分页数据
  22. $sql = "SELECT * FROM `shao` LIMIT {$num} OFFSET {$offset}";
  23. $users = $pdo->query($sql)->fetchAll(PDO::FETCH_ASSOC);
  25. // ajax分页数据一定是返回二部分
  26. // 1. 总页数, 提供给前端自动生成分页条
  27. // 2. 分页数据
  28. echo json_encode(['pages' => $pages, 'users' => $users]);
  29. die;

4. 作业，实现高亮跟着点击走

将无刷新分页案例,添加当前页码高亮的功能

  • 数据库连接操作的php文件
  1. <?php
  3. // 1. 连接数据库
  4. $pdo = new PDO('mysql:host=localhost;dbname=liangtest', 'liang', '123456');
  5. // 2. 获取页码
  6. $page = $_POST['page2'] ?? 1;
  8. // 3. 每页显示数量
  9. $num = 8;
  11. // 4. 每页显示偏移量
  12. $offset = ($page - 1) * $num;
  14. // 5. 总页数
  15. $sql = "SELECT CEIL(COUNT(`id`)/{$num}) AS `total` FROM `shao`";
  16. // echo $sql;
  17. $pages = $pdo->query($sql)->fetch()['total'];
  18. // echo $pages;
  20. // 6. 分页数据
  21. $sql = "SELECT * FROM `shao` LIMIT {$num} OFFSET {$offset}";
  22. $users = $pdo->query($sql)->fetchAll(PDO::FETCH_ASSOC);
  25. // ajax分页数据一定是返回二部分
  26. // 1. 总页数, 提供给前端自动生成分页条
  27. // 2. 分页数据
  29. echo json_encode(['pages' => $pages, 'users' => $users]);
  30. die;
  • 前端的html
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Ajax-post无刷新分页技术</title>
  7.     <style>
  8.       table {
  9.         border-collapse: collapse;
  10.         border: 1px solid;
  11.         text-align: center;
  12.         margin: auto;
  13.         width: 500px;
  14.       }
  15.       table caption {
  16.         font-size: 1.2rem;
  17.         margin-bottom: 10px;
  18.       }
  19.       th,
  20.       td {
  21.         border: 1px solid;
  22.         padding: 5px;
  23.       }
  24.       thead tr:first-of-type {
  25.         background-color: #ddd;
  26.       }
  27.       p {
  28.         text-align: center;
  29.       }
  31.       p a {
  32.         text-decoration: none;
  33.         border: 1px solid;
  34.         padding: 0 8px;
  35.       }
  37.       .active {
  38.         background-color: #f00;
  39.       }
  40.     </style>
  41.   </head>
  42.   <body>
  43.     <table>
  44.       <caption>
  45.         用户信息表
  46.       </caption>
  47.       <thead>
  48.         <tr>
  49.           <th>id</th>
  50.           <th>date</th>
  51.           <th>title</th>
  52.           <th>label</th>
  53.           <th>others</th>
  54.         </tr>
  55.       </thead>
  56.       <tbody></tbody>
  57.     </table>
  58.     <!-- 分页条 -->
  59.     <p></p>
  60.     <script src="../220818/lib/jquery-3.5.1.js"></script>
  61.     <script>
  62.       // 默认是第一页
  64.       var page1 = 1;
  65.       getData(page1);
  67.       // 获取分页数据的函数
  68.       function getData(page1) {
  69.         $.ajax({
  70.           type: "post",
  71.           url: "my.php",
  72.           data: {page2: page1},
  73.           // 关键：这个地方的page1发送到php sever那边的。
  74.           // page1其实是一个数值，需要通过前面的page2过去。
  75.           // page2必须跟php文件中的$_post后面的变量保持一致
  76.           dataType: "json",
  77.           success: dataShow,
  78.         });
  79.       }
  81.       // dataShow()显示数据
  82.       function dataShow(data1) {
  83.         console.log(data1.pages);
  84.         console.log(data1.users);
  86.         var str = "";
  87.         data1.users.forEach(function (user) {
  88.           str += "<tr>";
  89.           str += "<td>" + user.id + "</td>";
  90.           str += "<td>" + user.date + "</td>";
  91.           str += "<td>" + user.title + "</td>";
  92.           str += "<td>" + user.label + "</td>";
  93.           str += "<td>" + user.others + "</td>";
  94.           str += "</tr>";
  95.         });
  96.         $("tbody").html(str);
  97.       }
  99.         // 2. 将分页条显示出来（这部分原来是在上面的dataShow函数中的，自己拿出来了）
  100.         // 但问题来了？？？？？？ 这个时候就无法用data1.pages了。后面需要看下function中的变量如何拿出来用。
  101.       var str = "";
  102.       for (var i=1; i <= 22; i++){
  103.         str += '<a href="" data-index=' + i + '>' + i + '</a>';
  104.         // $('p').html(str).find("a").eq(page1-1).addClass('active');
  105.         $('p').html(str).find("a").first().addClass('active');
  106.       }
  108.         // 3. 添加分页点击事件（这部分同样原来是在上面的dataShow函数中的，自己拿出来了）
  109.         // 拿出来的的原因是下面的getData本来就是调用dataShow的，结果dataShow里面又调取getData，感觉是一个死循环
  110.         // 刚开始老师的first高亮一直去不掉原因也是这个。
  111.       $("p a").click(function (ev) {
  112.           ev.preventDefault();
  113.           page1 = $(ev.target).attr("data-index");
  114.           getData(page1);
  115.           $("p a").removeClass("active");
  116.           $(ev.target).addClass("active");
  117.         });
  119.     </script>
  120.   </body>
  121. </html>
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：关于异步编程, 我们这个案例应该是目前 最全的, 一定要多写几次, 直到背下来
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post