简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > JS基础-jQuery操作ajax/无刷新分页小实战
Blogger Information
Blog 57
fans 3
comment 0
visits 59795
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
JS基础-jQuery操作ajax/无刷新分页小实战
岂几岂几
Original
786 people have browsed it

1. jQuery操作ajax

    1. load(): 加载HTML片段, 即把其他HTML页面文件加载进来, 加载方式: 异步, GET方式加载
    • load()函数加载的外部代码片段, 会直接作为调用load()方法的子元素, 不能反悔相应的代码片段字符串.
    1. $.get(url, data, callback): 以get的方式从服务器获取资源/数据
    1. $.post(url, data, callback): 以post的方式从服务器获取资源/数据, 使用方法跟get很类似
    1. $.getJSON(url, data, callback): 以get的方式从服务器获取JSON格式的数据, 并转换成js对象.
    • 跟普通的get请求不同的点: getJSON()方法会自动把返回的字符串转换为JSON对象, 再传入回调函数中, 即, 自动执行var data = JSON.parse(res)语句, 得到的data是一个JS对象数据.
    1. $ajax(): 能实现上面2到4的方法, 实际上掌握这个方法即可.
    • 五个常用对象字面量参数:
      • type: 请求类型, 即: GET, POST
      • url: 请求的url
      • data: 发送的数据, 若是GET请求, 数据可以放到url上, 而POST请求必须放到data这里
      • dataType: 期望服务器返回/相应的数据类型(大部分场景可以自己判断)
      • success: function(data) {// 回调函数...函数参数的data是服务器返回的数据}
    1. $.ajax()-jsonp: 使用$.ajax()发送跨域请求
    • url参数中的jsonp参数指定的是当前脚本中的一个回调函数, 一般不写死, 用?做占位符, 请求成功后, 会用success指定的回调函数来填充?占位符.
    • 如果不想用success指定的回调函数来填充?占位符, 也可以用jsonpCallback参数指定一个本地函数来填充?占位符.

第一个按钮加载的外部HTML代码片段nav.html

  1. <ul>
  2.     <li>首页</li>
  3.     <li>PHP</li>
  4.     <li>HTML</li>
  5.     <li>CSS</li>
  6.     <li>JavaScript</li>
  7. </ul>

第二至第五个按钮发送的请求访问的模拟数据库查询文件users.php

  1. <?php
  2. // 模拟数据库
  3. $users = [
  4.     ['id' => 1, 'name' => 'zhangsan', 'age' => 33],
  5.     ['id' => 2, 'name' => 'lisi', 'age' => 23],
  6.     ['id' => 3, 'name' => 'wangwu', 'age' => 35],
  7.     ['id' => 4, 'name' => 'zhaoliu', 'age' => 39],
  8. ];
  10. $id = intval($_REQUEST['id']);
  11. if(in_array($id, array_column($users, 'id'))) {
  12.     foreach($users as $user) {
  13.         if($user['id'] == $id) {
  14.             // 以自定义格式字符串返回(按钮2, 3)
  15.             // vprintf('%s : %s %s 岁', $user);
  16.             // 以JSON格式字符串返回(按钮4)
  17.             echo json_encode($user);
  18.         }
  19.     }
  20. } else {
  21.     echo "<span style='color: red'>没有找到</span>";
  22. }

第六/第七个按钮访问的查询数据库脚本文件

  1. <?php
  2. // 这里返回json数据, 而json只支持utf8编码
  3. header('content-type: text/html;charset=utf-8');
  5. // 模拟根据id值获取数据, 并调用回调函数处理数据
  6. // 获取请求参数(jsonp指定一个回调函数名)
  7. $callback = $_GET['jsonp'];
  8. $id = $_GET['id'];
  10. // 返回的处理结果数组
  11. $res = [
  12.     'status' => '1',
  13.     'message' => '查询成功',
  14. ];
  16. // 判断id值是否有效
  17. if(!filter_var($id, FILTER_VALIDATE_INT, ['option' => ['min_range' => 1]])) {
  18.     $res['status'] = '0';
  19.     $res['message'] = 'ID值无效';
  20. }
  22. // 连接数据库
  23. $pdo = new PDO('mysql:host=localhost;dbname=phpedu;charset=utf8;port=3306', 'root', 'root');
  24. // 查询
  25. $stmt = $pdo->query("SELECT * FROM `player` WHERE `id` = {$id}");
  26. // 判断是否查到值
  27. if(!$stmt || $stmt->rowCount < 1) {
  28.     // 没查到的处理
  29.     $res['status'] = '0';
  30.     $res['message'] = 'ID值无效';
  31. } else {
  32.     // 查到数据
  33.     $res['data'] = $stmt->fetch(PDO::FETCH_ASSOC);
  34. }
  36. // 打印回调
  37. echo $callback . '(' . json_encode(json_encode($res)) . ')';

jQuery操作ajax实例文件

  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>jQuery中操作ajax</title>
  7.     <!-- CDN方式引用, 即内容分发方式 -->
  8.     <!-- BootCDN或者又拍云的CDN的速度都可以 -->
  9.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
  10.     <!-- 本地引用 -->
  11.     <style>
  12.       body {
  13.         height: 100vh;
  14.         width: 100vw;
  15.         display: flex;
  16.         flex-flow: column nowrap;
  17.         justify-content: start;
  18.       }
  20.       body button {
  21.         margin-bottom: 10px;
  22.         border: 1px solid orangered;
  23.         background-color: wheat;
  24.         width: 280px;
  25.       }
  27.       body button:hover {
  28.         border: 1px solid orange;
  29.         background-color: papayawhip;
  30.         cursor: pointer;
  31.       }
  32.     </style>
  33.   </head>
  35.   <body>
  36.     <button type="button">1. load()请求数据</button>
  37.     <button type="button">2. $.get()请求数据</button>
  38.     <button type="button">3. $.post()请求数据</button>
  39.     <button type="button">4. $.getJSON()请求JSON数据</button>
  40.     <button type="button">5. $.ajax()请求数据</button>
  41.     <button type="button">6. $.ajax()-jsonp-跨域请求数据1</button>
  42.     <button type="button">7. $.ajax()-jsonp-跨域请求数据2</button>
  43.   </body>
  44.   <script>
  45.     var cl = console.log.bind(console);
  47.     // 1. load(): 加载HTML片段, 即把其他HTML页面文件加载进来, 加载方式: 异步, GET方式加载
  48.     $("button:first-of-type").click(function () {
  49.       alert(134);
  50.       cl(this);
  51.       // after()函数: 在当前元素后面增加一个指定元素(作为其兄弟元素),
  52.       // 然后获取当前元素的下一个兄弟元素, 在其中加载nav.html文件
  53.       $(this).after("<div>").next("div").load("nav.html");
  54.     });
  56.     // 2. $.get(url, data, callback): 以get的方式从服务器获取资源/数据
  57.     $("button:nth-of-type(2)").click(function (event) {
  58.       $.get(
  59.         "users.php",
  60.         // 因为是get请求, 所以, 可以在user.php后面增加?id=2, 也可以给第二个参数入参对象字面量来传递get请求参数
  61.         { id: 2 },
  62.         function (data) {
  63.           // cl(data);
  64.           // 在当前元素后面新增一个div元素, 并把data作为其innerHTML属性值.
  65.           $(event.target).after("<div>").next().html(data);
  66.         }
  67.       );
  68.     });
  70.     // 3. $.post(url, data, callback): 以post的方式从服务器获取资源/数据, 使用方法跟get很类似
  71.     $("button:nth-of-type(3)").click(function (event) {
  72.       $.post("users.php", { id: 2 }, function (data) {
  73.         // cl(data);
  74.         // 在当前元素后面新增一个div元素, 并把data作为其innerHTML属性值.
  75.         $(event.target).after("<div>").next().html(data);
  76.       });
  77.     });
  79.     // 4. $.getJSON(url, data, callback): 接口大多返回的是JSON
  80.     $("button:nth-of-type(4)").click(function (event) {
  81.       $.getJSON("users.php?id=2", function (data) {
  82.         /* 跟普通的get请求不同的点: getJSON()方法会自动把返回的字符串转换为JSON对象, 
  83.                     再传入回调函数中, 即, 自动执行var data = JSON.parse(res)语句, 得到的
  84.                     data是一个JS对象数据. */
  85.         // cl(data);
  86.         var res = data.id + ":" + data.name + ", " + data.age + "岁";
  87.         // 在当前元素后面新增一个div元素, 并把data作为其innerHTML属性值.
  88.         $(event.target).after("<div>").next().html(res);
  89.       });
  90.     });
  92.     // 5. $ajax(): 能实现上面2到4的方法, 实际上掌握这个方法即可.
  93.     /* 五个常用对象字面量参数:
  94.         type: 请求类型, 即: GET, POST
  95.         url: 请求的url
  96.         data: 发送的数据, 若是GET请求, 数据可以放到url上, 而POST请求必须放到data这里
  97.         dataType: 期望服务器返回/相应的数据类型(大部分场景可以自己判断)
  98.         success: function(data) {// 回调函数...入参的data是服务器返回的数据}
  99.          */
  100.     // 实例:
  101.     $("button:nth-of-type(5)").click(function (event) {
  102.       // 发送POST请求
  103.       $.ajax({
  104.         type: "POST",
  105.         url: "users.php",
  106.         data: { id: 2 },
  107.         dataType: "json",
  108.         success: function (data) {
  109.           alert("success");
  110.           cl(data);
  111.         },
  112.       });
  113.     });
  115.     // 6. $.ajax()-jsonp-1: 发送跨域请求
  116.     /* "http://php.edu/0522/test2.php?jsonp=handle&id=2" */
  117.     $("button:nth-of-type(6)").click(function (event) {
  118.       // 发送POST请求
  119.       $.ajax({
  120.         type: "GET",
  121.         // jsonp参数指定的是当前脚本中的一个回调函数, 一般不写死, 用?做占位符,
  122.         // 请求成功后, 会用success(data)函数来填充?占位符.
  123.         url: "http://php.edu/0522/test2.php?jsonp=?&id=2",
  124.         // 返回的数据类型是jsonp
  125.         dataType: "jsonp",
  126.         success: function (data) {
  127.           // test2.php返回的是一个JSON字符串
  128.           cl(data);
  129.           // 转成js对象
  130.           var res = JSON.parse(data);
  131.           // 输出到页面中, 略
  132.         },
  133.       });
  134.     });
  136.     // 7. $.ajax()-jsonp-1: 发送跨域请求
  137.     /* "http://php.edu/0522/test2.php?jsonp=handle&id=2" */
  138.     $("button:nth-of-type(7)").click(function (event) {
  139.       // 发送POST请求
  140.       $.ajax({
  141.         type: "GET",
  142.         // jsonp参数指定的是当前脚本中的一个回调函数, 一般不写死, 用?做占位符,
  143.         // 请求成功后, 会用success(data)函数来填充?占位符.
  144.         url: "http://php.edu/0522/test2.php?jsonp=?&id=2",
  145.         // 返回的数据类型是jsonp
  146.         dataType: "jsonp",
  147.         // 不想用success(data)来填充?占位的话, 可以用jsonpCallback来指定一个函数, 来填充?占位
  148.         jsonpCallback: 'handle',
  149.       });
  150.     });
  152.     function handle(data) {
  153.       // test2.php返回的是一个JSON字符串
  154.       cl(data);
  155.       // 转成js对象
  156.       var res = JSON.parse(data);
  157.       // 输出到页面中, 略
  158.     }
  159.   </script>
  160. </html>

2. 使用jQuery操作ajax实现无刷新分页小实战

实现思路:

  • 把创建分页元素字符串的脚本封装起来, 根据传入的”当前页”, “总记录数”, “显示的页码个数”来创建分页元素字符串. 再传入一个回调函数作为页码点击事件的处理脚本.
  • 处理脚本主要完成:
      1. 根据”当前页”和”总记录数”两个参数查询分页数据和记录总数
      1. 拼接查询结果字符串, 作为表格的表体内容, 并插入表格的表体(<tbody>元素)
      1. 移除页面上已有的.pagination元素, 再插入新创建的分页元素.

封装生成分页元素的pagination/pagination.js

  1. var Pagination = {
  2.   // 第一页
  3.   start: 1,
  4.   // 一页可以容纳的记录数
  5.   pageSize: 3,
  6.   // 显示的页码个数
  7.   pageNumSize: 5,
  8.   // 显示的页码列表
  9.   pageNumList: [],
  10.   // 总页数
  11.   pageCount: 0,
  12.   // 页码左右偏移量
  13.   pageNumOffset: 0,
  14.   // 当前页码
  15.   currentPage: 1,
  16.   // 总记录数
  17.   rowCount: 0,
  18.   // 查询回调
  19.   search: "",
  21.   getPageInfo: function (pageObj = {}, search = "") {
  22.     // 初始化各种属性
  23.     // this.currentPage: currentPage;
  24.     // this.rowCount = rowCount;
  25.     // this.pageSize = pageSize;
  26.     // this.pageNumSize = pageNumSize;
  27.     $.extend(this, pageObj);
  28.     this.pageNumOffset = (this.pageNumSize - 1) / 2;
  29.     this.pageCount = Math.ceil(parseFloat(this.rowCount) / this.pageSize);
  30.     if (this.pageCount <= 1) {
  31.       return "";
  32.     }
  34.     /* 当传入的当前页码效于最小页码时，初始化为1；大于最大页码时，初始化为最大页码 */
  35.     this.currentPage =
  36.       this.currentPage < 1
  37.         ? 1
  38.         : this.currentPage > this.pageCount
  39.         ? this.pageCount
  40.         : this.currentPage;
  41.     // 回调
  42.     if (search != null) this.search = search;
  43.     // 计算显示的页码列表
  44.     this.getPageNumList();
  46.     // 生成分页数据
  47.     return this.createPageInfo();
  48.   },
  50.   getPageNumList: function () {
  51.     this.pageNumList = [];
  52.     // 如果要显示的页码数量>=总页码数量，则显示所有页码。
  53.     if (this.pageCount <= this.pageNumSize) {
  54.       for (var i = 1; i <= this.pageCount; i++) {
  55.         this.pageNumList.push(i);
  56.       }
  57.       return;
  58.     }
  60.     // 起始页码，取“当前页码-页码偏移量”和起始页码的最大值。
  61.     pageNumStart =
  62.       this.currentPage - this.pageNumOffset < this.start
  63.         ? this.start
  64.         : this.currentPage - this.pageNumOffset;
  65.     // 结束页码，取“当前页码+页码偏移量”和总页码数的最小值。
  66.     pageNumEnd =
  67.       pageNumStart + this.pageNumSize - 1 > this.pageCount
  68.         ? this.pageCount
  69.         : pageNumStart + this.pageNumSize - 1;
  70.     // 若结束页码等于总页码，则再计算一次起始页码（避免当前页到结束页码的差值小于页码偏移量的情况）
  71.     if (pageNumEnd === this.pageCount) {
  72.       // 起始页码，取“最大页码-要显示的页码数量+1”和起始页码的最大值。
  73.       pageNumStart =
  74.         this.pageCount - this.pageNumSize + 1 < this.start
  75.           ? this.start
  76.           : this.pageCount - this.pageNumSize + 1;
  77.     }
  79.     // 生成要显示的页码数组
  80.     for (var i = pageNumStart; i <= pageNumEnd; i++) {
  81.       this.pageNumList.push(i);
  82.     }
  83.   },
  85.   createPageInfo: function () {
  86.     var pageHtml = '<div class="pagination">';
  87.     pageHtml += '<link rel="stylesheet" href="pagination/pagination.css">';
  88.     // 首页
  89.     var tmpHtml =
  90.       this.currentPage === 1
  91.         ? '<span class="pageNum disabled">首页</span>'
  92.         : '<span class="pageNum" onclick="' +
  93.           this.search +
  94.           "(1, " +
  95.           this.pageNumSize +
  96.           ')">首页</span>';
  97.     pageHtml += tmpHtml;
  99.     // 上一页
  100.     tmpHtml =
  101.       this.currentPage === 1
  102.         ? '<span class="pageNum disabled">上一页</span>'
  103.         : '<span class="pageNum" onclick="' +
  104.           this.search +
  105.           "("+(this.currentPage - 1)+", " +
  106.           this.pageNumSize +
  107.           ')">上一页</span>';
  108.     pageHtml += tmpHtml;
  110.     // 间隔符
  111.     tmpHtml = this.pageNumList[0] >= 2 ? "..." : "";
  112.     pageHtml += tmpHtml;
  114.     console.log(this.pageNumList.length);
  115.     // 显示的页码
  116.     this.pageNumList.forEach((pageNum) => {
  117.       tmpHtml =
  118.         pageNum == this.currentPage
  119.           ? '<span class="pageNum active">' + pageNum + "</span>"
  120.           : '<span class="pageNum" data-pageNum="' +
  121.             pageNum +
  122.             '" onclick="' +
  123.             this.search +
  124.             "(" +
  125.             pageNum +
  126.             ", " +
  127.             this.pageNumSize +
  128.             ')">' +
  129.             pageNum +
  130.             "</span>";
  131.       pageHtml += tmpHtml;
  132.     });
  134.     // 间隔符
  135.     tmpHtml = this.pageNumList[this.pageNumSize - 1] <= this.pageCount - 1 ? "..." : "";
  136.     pageHtml += tmpHtml;
  138.     // 下一页
  139.     tmpHtml =
  140.       this.currentPage >= this.pageCount
  141.         ? '<span class="pageNum disabled">下一页</span>'
  142.         : '<span class="pageNum" onclick="' +
  143.           this.search +
  144.           "(" +
  145.           (this.currentPage + 1) +
  146.           ", " +
  147.           this.pageNumSize +
  148.           ')">下一页</span>';
  149.     pageHtml += tmpHtml;
  151.     // 末页
  152.     tmpHtml =
  153.       this.currentPage >= this.pageCount
  154.         ? '<span class="pageNum disabled">末页</span>'
  155.         : '<span class="pageNum" onclick="' +
  156.           this.search +
  157.           "(" +
  158.           this.pageCount +
  159.           ", " +
  160.           this.pageNumSize +
  161.           ')">末页</span>';
  162.     pageHtml += tmpHtml;
  164.     pageHtml += "</div>";
  166.     return pageHtml;
  167.   },
  168. };

前端显示查询分页结果页面player.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>球员列表</title>
  7.     <!-- CDN方式引用, 即内容分发方式 -->
  8.     <!-- BootCDN或者又拍云的CDN的速度都可以 -->
  9.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
  10.     <!-- 本地引用 -->
  11.     <script src="pagination/pagination.js"></script>
  12.     <style>
  13.       table {
  14.             border: 0;
  15.             min-width: 800px;
  16.             margin: 0 auto 30px;
  17.             border-spacing: 0px;
  18.         }
  20.         table caption {
  21.             font-size: 1.5rem;
  22.             margin-bottom: 20px;
  23.         }
  25.         table thead tr {
  26.             background-color: lightskyblue;
  27.         }
  29.         table tbody tr:hover {
  30.             background-color: lightcyan;
  31.         }
  33.         table tr td,
  34.         th {
  35.             border: 1px solid #ccc;
  36.             padding: 0 10px;
  37.             height: 30px;
  38.             color: #666;
  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>身高(cm)</th>
  53.           <th>体重(kg)</th>
  54.           <th>位置</th>
  55.           <th>创建时间</th>
  56.           <th>修改时间</th>
  57.         </tr>
  58.       </thead>
  59.       <tbody>
  60.         <!-- 将插入球员列表 -->
  61.       </tbody>
  62.     </table>
  63.   </body>
  64.   <script>
  65.       // 获取球员分页数据
  66.     function playerList(pageNum = 1, pageSize = 5) {
  67.       $.ajax({
  68.         type: "POST",
  69.         url: "player.php",
  70.         data: {
  71.           pageNum: pageNum,
  72.           pagSize: pageSize,
  73.         },
  74.         dataType: "json",
  75.         success: function (res) {
  76.           // 查询成功
  77.           if (res.status == "1") {
  78.               // 渲染分页球员数据
  79.             var dataStr = renderData(res.data.pageData, res.data.count);
  80.             $("tbody").html(dataStr);
  82.             // 获取分页元素字符串
  83.             var paginate = Pagination.getPageInfo(
  84.               {
  85.                 currentPage: pageNum,
  86.                 pageSize: pageSize,
  87.                 //   pageNumSize: pageSize,
  88.                 rowCount: parseInt(res.data.count),
  89.               },
  90.               "playerList"
  91.             );
  93.             // 若页面中已存在分页元素, 则删除之
  94.             var $pagination = $('.pagination');
  95.             if($pagination.length > 0)
  96.               $pagination.parent().get(0).removeChild($pagination.get(0));
  97.               // 转换并插入最新生成的分页元素
  98.             $("body").append($(paginate));
  99.           }
  100.         },
  101.       });
  102.     }
  104.     // 渲染数据
  105.     function renderData(pageData, count) {
  106.       // var players = res.data.pageData;
  107.       //     var count = res.data.count;
  108.       if (pageData.length > 0) {
  109.         var playerStr = "";
  110.         pageData.forEach((element) => {
  111.           playerStr += "<tr>";
  112.           playerStr += "<td>" + element.id + "</td>";
  113.           playerStr += "<td>" + element.name + "</td>";
  114.           playerStr += "<td>" + element.team + "</td>";
  115.           playerStr += "<td>" + element.height + "</td>";
  116.           playerStr += "<td>" + element.weight + "</td>";
  117.           playerStr += "<td>" + element.position + "</td>";
  118.           playerStr += "<td>" + element.create_time + "</td>";
  119.           playerStr += "<td>" + element.update_time + "</td>";
  120.           playerStr += "</tr>";
  121.         });
  122.       } else {
  123.         return '<tr><td colspan="8">啥也没查到...</td></tr>';
  124.       }
  125.       return playerStr;
  126.     }
  128.     // run~~!!!
  129.     playerList();
  130.   </script>
  131. </html>

运行效果图:

3. 学习心得

  • jQuery操作ajax, 简化了代码, 但是也隐藏了很多细节, 需要对比原生ajax请求来加深记忆.
  • 无刷新分页的小实战, 是强迫自己以面向对象的思想, 封装分页拼装细节, 但是感觉还是把过程封装而已, 可复用性不强, 还需要加强自己的抽象总结能力.
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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！