search

博客列表 >front 24 jQuery事件绑定、Ajax获得数据，分页实战（0820thu）

front 24 jQuery事件绑定、Ajax获得数据，分页实战（0820thu）

老黑
老黑原创
2020年08月28日 20:34:08586浏览

主要内容：

  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>
上一条：初学jQuery下一条：js经典案例实战
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多