微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > 博客列表 > front 24 jQuery事件绑定、Ajax获得数据，分页实战（0820thu）
博主信息
博文 62
粉丝 2
评论 1
访问量 58156
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
front 24 jQuery事件绑定、Ajax获得数据，分页实战（0820thu）
老黑
原创
793人浏览过

主要内容：

  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>
批改老师：天蓬老师天蓬老师

批改状态：合格

老师批语：关于异步编程, 我们这个案例应该是目前 最全的, 一定要多写几次, 直到背下来
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录