search

博客列表 >jQuery的ajax操作，和无刷新分页（0820）

jQuery的ajax操作，和无刷新分页（0820）

丶久而旧之丶
丶久而旧之丶原创
2020年10月03日 21:45:48855浏览

jQuery的ajax操作

jQuery事件

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>jquery事件</title>
  8.     <style>
  9.         form {
  10.             width: 300px;
  11.             height: 200px;
  12.             margin: 20px auto;
  13.             background-color: bisque;
  14.             display: flex;
  15.             flex-flow: column;
  16.             justify-content: space-evenly;
  17.             align-items: center;
  18.             border-radius: 10px;
  20.         }
  22.         .item {
  23.             margin-left: -120px;
  24.         }
  26.         .btn {
  27.             width: 100px;
  28.             height: 30px;
  29.         }
  31.         .lab {
  32.             margin-left: 17px;
  33.         }
  35.         h2 {
  36.             text-align: center;
  37.             color: cadetblue;
  38.         }
  39.     </style>
  40. </head>
  42. <body>
  43.     <h2>用户登录</h2>
  44.     <form action='' method="GET">
  45.         <div>
  46.             <label for="username">用户名：</label>
  47.             <input type="text" id="username" name="username" autofocus value="明仔" placeholder="请输入用户名">
  48.         </div>
  49.         <div class="lab">
  50.             <label for="password">密码：</label>
  51.             <input type="password" id="password" name="password" value="123456" placeholder="请输入密码">
  52.         </div>
  53.         <div class="item">
  54.             <label for="config">是否记住密码</label>
  55.             <input type="checkbox" name="config" id="config" value="1" checked>
  56.         </div>
  57.         <div><button class='btn'>登录</button></div>
  58.     </form>
  59.     <script src="../lib/jquery-3.5.1.js"></script>
  60.     <script>
  61.         $("form").submit(function (ev) {
  62.             // 禁用表单的默认行为
  63.             ev.preventDefault();
  64.         });
  65.         // 验证用户名是正确
  66.         // 先获取用户名输入框
  67.         var user = $("input[name=username]");
  68.         // 失去焦点事件
  69.         user.blur(function () {
  70.             // 提示
  71.             var tips = "";
  72.             // 演示从数据库获取的用户名数据
  73.             var users = ["useradmin", "admin", "adminpwd"];
  74.             if ($(this).val().trim().length === 0) {
  75.                 // 如果有空格清除空格并重新获取焦点
  76.                 $(this).val("")
  77.                 $(this).focus();
  78.                 tips = "用户名不能为空";
  79.             } else if (users.indexOf($(this).val()) === -1) {
  80.                 // 验证用户名输入框内容是否在数据中
  81.                 tips = "用户名不存在请：" + "<button type='button'>注册</button>";
  82.             } else {
  83.                 tips = "<span style='color:green'>用户名正确</span>"
  84.             }
  85.             // 防止重复添加
  86.             if ($(this).parent().next().get(0).tagName !== "SPAN") {
  87.                 $("<span>").html(tips).css("color", "red").insertAfter($(this).parent());
  88.             }
  89.             // 用户重新输入内容时提示信息消失
  90.             user.on("keydown", function () {
  91.                 $(this).parent().next("span").remove();
  92.             })
  93.         });
  94.     </script>
  95. </body>
  97. </html>

ajax方法

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>jQuery的ajax</title>
  8.     <style>
  9.         div {
  10.             width: 400px;
  11.             height: 300px;
  12.             display: flex;
  13.             flex-flow: column;
  14.         }
  16.         button {
  17.             margin: 5px;
  18.         }
  19.     </style>
  20. </head>
  22. <body>
  23.     <div>
  24.         <button>1.load()请求数据</button>
  25.         <button>2.$.get()请求数据</button>
  26.         <button>3.$.post()请求数据</button>
  27.         <button>4.get.JSON()请求JSON数据</button>
  28.         <button>5.ajax()请求数据</button>
  29.         <button>6.$.ajax()-jsonp-跨域请求数据1</button>
  30.         <button>7.$.ajax()-jsonp-跨域请求数据2</button>
  31.     </div>
  32.     <script src="../lib/jquery-3.5.1.js"></script>
  33.     <script>
  34.         // 1.load()方法获取html片段
  35.         $("button:first-of-type").click(function () {
  36.             // 插入到前面
  37.             // $(this).before("<div>").prev().load("load.html");
  38.             // 插入到后面
  39.             $("<div>").load("load.html").insertAfter($(this));
  40.         });
  42.         // 2.get()方法
  43.         $("button:nth-of-type(2)").click(function (ev) {
  44.             $.get("ceshi.php", { id: 1 }, function (data) {
  45.                 $("<div>").html(JSON.parse(data)).insertAfter($(ev.target));
  46.                 // console.log(JSON.parse(data))
  47.             });
  48.         });
  50.         // 3.post方法
  51.         $("button:nth-of-type(3)").click(function (ev) {
  52.             $.post("ceshi.php", { id: 2 }, function (data) {
  53.                 $("<div>").html(JSON.parse(data)).insertAfter($(ev.target));
  54.             })
  55.         });
  57.         // 4.$.get.JSON()方法
  58.         $("button:nth-of-type(4)").click(function (ev) {
  59.             $.getJSON("ceshi.php", { id: 3 }, function (data) {
  60.                 $("<div>").html(data).insertAfter($(ev.target));
  61.             })
  62.         });
  64.         // 5.$.ajax()方法
  65.         $("button:nth-of-type(5)").click(function (ev) {
  66.             $.ajax({
  67.                 // 请求类型
  68.                 type: "GET",
  69.                 // 请求的url
  70.                 url: "ceshi.php",
  71.                 // 发送的数据
  72.                 data: { id: 4 },
  73.                 // 返回类型
  74.                 dataType: 'json',
  75.                 success: function (data) {
  76.                     $("<div>").html(data).insertAfter($(ev.target));
  77.                 }
  78.             });
  79.         });
  81.         // 6.-jsonp-跨域请求数据1
  82.         $("button:nth-of-type(6)").click(function (ev) {
  83.             $.ajax({
  84.                 type: "GET",
  85.                 url: "http://phpio.com/JSONP.php?jsonp=?&id=1",
  86.                 dataType: "jsonp",
  87.                 success: function (data) {
  88.                     var date = "<li>" + data.title + "</li>";
  89.                     date += "<li>" + data.user.name + "</li>";
  90.                     date += "<li>" + data.user.result + "</li>";
  91.                     $("<div>").html(date).insertAfter($(ev.target));
  92.                 },
  93.             });
  94.         });
  96.         // 7.-jsonp-跨域请求数据2
  97.         $("button:last-of-type").click(function (ev) {
  98.             $.ajax({
  99.                 type: "GET",
  100.                 url: "http://phpio.com/JSONP.php?jsonp=?&id=3",
  101.                 dataType: "jsonp",
  102.                 jsonpCallback: "get",
  103.             });
  104.         });
  105.         function get(data) {
  106.             var date = "<li>" + data.title + "</li>";
  107.             date += "<li>" + data.user.name + "</li>";
  108.             date += "<li>" + data.user.result + "</li>";
  109.             $("<div>").html(date).insertAfter($("button:last-of-type"));
  110.         };
  111.     </script>
  112. </body>
  114. </html>

无刷新分页

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>post分页</title>
  8.     <style>
  9.         table {
  10.             border: 1px solid black;
  11.             border-collapse: collapse;
  12.             width: 300px;
  13.             margin: 30px auto;
  14.             text-align: center;
  15.         }
  17.         td {
  18.             border: 1px solid;
  19.         }
  21.         thead {
  22.             background-color: lightblue;
  23.             font-size: 1.2rem;
  24.         }
  26.         p {
  27.             text-align: center;
  28.         }
  30.         p>a {
  31.             text-decoration: none;
  32.             border: 1px solid black;
  33.             padding: 0 5px;
  34.             color: lightslategray;
  35.         }
  37.         .active {
  38.             background-color: lightslategray;
  39.             color: lightyellow;
  40.         }
  41.     </style>
  42. </head>
  44. <body>
  45.     <table>
  46.         <caption>用户信息</caption>
  47.         <thead>
  48.             <tr>
  49.                 <td>ID</td>
  50.                 <td>姓名</td>
  51.                 <td>性别</td>
  52.             </tr>
  53.         </thead>
  54.         <tbody></tbody>
  55.     </table>
  56.     <!-- 分页条 -->
  57.     <p></p>
  58.     <script src=" ../lib/jquery-3.5.1.js"></script>
  59.     <script>
  60.         // 默认第一页
  61.         var page = 1;
  62.         // 显示第一页
  63.         get(page);
  65.         function get(page) {
  66.             $.ajax({
  67.                 type: "POST",
  68.                 url: "fenye.php",
  69.                 data: { page: page },
  70.                 dataType: "json",
  71.                 success: show,
  72.             });
  73.         };
  74.         function show(data) {
  75.             // console.log(data);
  76.             // 显示数据
  77.             var str = "";
  78.             data.user.forEach(function (item) {
  79.                 str += "<tr>";
  80.                 str += "<td>" + item.id + "</td>";
  81.                 str += "<td>" + item.username + "</td>";
  82.                 str += "<td>" + item.sex + "</td>";
  83.                 str += "</tr>";
  85.             });
  86.             $("tbody").html(str);
  87.             // 显示分页条
  88.             var a = "";
  89.             for (var i = 0; i < data.pages; i++) {
  90.                 a += '<a href="" data-index=' + (i + 1) + ">" + (i + 1) + "</a>"
  91.             }
  92.             // 把分页条显示到页面中
  93.             $("p").html(a);
  94.             // 生成a标签的高亮
  95.             $("a").get(data.page - 1).classList.add("active");
  97.         }
  98.         $("p").click(function (ev) {
  99.             // 先禁用默认行为
  100.             ev.preventDefault();
  101.             // 获取页码
  102.             page = $(ev.target).data("index");
  103.             get(page);
  104.         });
  105.     </script>
  106. </body>
  108. </html>

PHP代码

  1. <?php
  2. // 分页数据脚本
  4. // 连接数据库
  5. $pdo = new PDO("mysql:host=localhost;dbname=user;charset=utf8;", "root", "root");
  7. // 获取页码
  8. $page = $_POST['page'] ?? 1;
  11. // 每页显示数量
  12. $num = 7;
  14. // 每页偏移量
  15. $offset = ($page - 1) * $num;
  17. // 获取总页数
  18. $sql = "SELECT CEIL(COUNT(`id`)/{$num}) AS `total`FROM `apple`";
  19. // $sql = "SELECT * FROM `apple`";
  20. $pages = $pdo->query($sql)->fetch(PDO::FETCH_ASSOC)['total'];
  22. // 获取分页数据
  24. $sql = "SELECT * FROM `apple` LIMIT {$num} OFFSET {$offset}";
  25. $user = $pdo->query($sql)->fetchAll(PDO::FETCH_ASSOC);
  28. // 返回给前端数据
  29. echo json_encode(["pages" => $pages, "user" => $user, "page" => $page]);

总结

1.一开始是想着和之前一样点击后把之前的高亮去除后再添加，点击事件忙活了一下才发现一开始设置高亮的代码不能写死，不然每次执行show方法时只有第一个有高亮显示
2.有个疑问就是，一开始是想着在show方法外面设置高亮，那么就可以实现先取消高亮然后通过点击再设置高亮，但是在show方法外面获取不到a标签，只有在show方法里面才能获取的到a标签，这个有点没搞懂。

上一条：markdown 语法下一条：003.html 之表单演示
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多