Community Learn Tools Library Leisure
search
English
Home > List of blog posts > js学习：第21章 事件与Ajax实战、无刷分页
Blogger Information
Blog 52
fans 0
comment 3
visits 42392
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学习：第21章 事件与Ajax实战、无刷分页
王小飞
Original
683 people have browsed it

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.     <script src="lib/jquery-3.5.1.js"></script>
  7.     <title>Ajax</title>
  8.     <style>
  9.       body {
  10.         display: grid;
  11.         gap: 15px;
  12.       }
  13.       button {
  14.         text-align: left;
  15.         height: 26px;
  16.       }
  17.       button:hover {
  18.         background-color: #ddd;
  19.         cursor: pointer;
  20.       }
  21.     </style>
  22.   </head>
  23.   <body>
  24.     <button type="button">1. load()请求数据</button>
  25.     <button type="button">2. $.get()请求数据</button>
  26.     <button type="button">3. $.post()请求数据</button>
  27.     <button type="button">4. $.getJSON()请求JSON数据</button>
  28.     <button type="button">5. $.ajax()请求数据</button>
  29.     <button type="button">6. $.ajax()-jsonp-跨域请求数据1</button>
  30.     <button type="button">7. $.ajax()-jsonp-跨域请求数据2</button>
  31.   </body>
  32. </html>
  33. <script>
  34.   var cl = console.log.bind(console);
  35.   // 1. load(): 加载html片断
  36.   $("button:first-of-type").click(function () {
  37.     $(this).after("<div>").next().load("nav.html");
  38.   });
  40.   // 2. $.get():以get方式从服务器获取资源/数据
  41.   $("button:nth-of-type(2)").click(function (ev) {
  42.     //    $.get(url, data, callback)
  43.     $.get("users.php", { id: 2 }, function (data) {
  44.       //   cl(data);
  45.       $(ev.target).after("<div>").next().html(data);
  46.     });
  47.   });
  49.   // 3. $.post():以post方式从服务器获取资源/数据
  50.   $("button:nth-of-type(3)").click(function (ev) {
  51.     //    $.post(url, data, callback)
  52.     $.post("users.php", { id: 4 }, function (data) {
  53.       //   cl(data);
  54.       $(ev.target).after("<div>").next().html(data);
  55.     });
  56.   });
  58.   // 4. $.getJSON():接口返回的大多是JSON
  59.   $("button:nth-of-type(4)").click(function (ev) {
  60.     //    $.getJSON(url, data, callback)
  61.     $.getJSON("users.php?id=2", function (data) {
  62.       // 返回就是js对象了, 不必转换
  63.       //   cl(JSON.parse(data));
  64.       cl(data);
  65.       var res = data.id + ": " + data.name + ", " + data.age + "岁";
  66.       $(ev.target).after("<div>").next().html(res);
  67.     });
  68.   });
  70.   // 5. $.ajax(): 终级方法, 实际上大家只需要掌握这一个方法
  71.   //   $.ajax({
  72.   //     // 请求类型
  73.   //     type: "GET",
  74.   //     // 请求的URL
  75.   //     url: url,
  76.   //     // 发送的数据
  77.   //     data: data,
  78.   //     // 期望服务器返回/响应的数据类型
  79.   //     dataType: "json",
  80.   //     // 成功时的回调函数
  81.   //     success: callback,
  82.   //   });
  84.   $("button:nth-of-type(5)").click(function (ev) {
  85.     $.ajax({
  86.       type: "GET",
  87.       url: "users.php",
  88.       data: { id: 10 },
  89.       dataType: "html",
  90.       success: function (data) {
  91.         $(ev.target).after("<div>").next().html(data);
  92.       },
  93.     });
  94.   });
  96.   // "http://php.edu/0522/test2.php?jsonp=handle&id=3";
  98.   // 6. $.ajax()-jsonp-1:跨域请求
  99.   $("button:nth-of-type(6)").click(function (ev) {
  100.     $.ajax({
  101.       type: "GET",
  102.       url: "http://127.0.0.1/0522/test2.php?jsonp=?&id=2",
  103.       dataType: "jsonp",
  104.       success: function (data) {
  105.         cl(data);
  106.         var data = JSON.parse(data);
  107.         cl(data);
  108.         var data =
  109.           "<p>" +
  110.           data.title +
  111.           "</p><p>" +
  112.           data.user.name +
  113.           ", 邮箱:" +
  114.           data.user.email +
  115.           "</p>";
  116.         $(ev.target).after("<div>").next().html(data);
  117.       },
  118.     });
  119.   });
  121.   // 7. $.ajax()-jsonp-2:跨域请求
  122.   $("button:last-of-type").click(function (ev) {
  123.     $.ajax({
  124.       type: "GET",
  125.       url: "http://127.0.0.1/0522/test2.php?jsonp=?&id=2",
  126.       dataType: "jsonp",
  127.       jsonpCallback: "handle",
  128.     });
  129.   });
  131.   function handle(data) {
  132.     cl(data);
  133.     var data = JSON.parse(data);
  134.     cl(data);
  135.     var data =
  136.       "<p>" +
  137.       data.title +
  138.       "</p><p>" +
  139.       data.user.name +
  140.       ", 邮箱:" +
  141.       data.user.email +
  142.       "</p>";
  143.     $("button:last-of-type").after("<div>").next().html(data);
  144.   }
  145. </script>

效果：

2. 无刷分页

代码：

  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.     <script src="lib/jquery-3.5.1.js"></script>
  7.     <title>Ajax无刷新分页技术</title>
  8.     <style>
  9.       table {
  10.         border-collapse: collapse;
  11.         border: 1px solid;
  12.         text-align: center;
  13.         margin: auto;
  14.         width: 500px;
  15.       }
  16.       table caption {
  17.         font-size: 1.2rem;
  18.         margin-bottom: 10px;
  19.       }
  20.       th,
  21.       td {
  22.         border: 1px solid;
  23.         padding: 5px;
  24.       }
  25.       thead tr:first-of-type {
  26.         background-color: #ddd;
  27.       }
  28.       p {
  29.         text-align: center;
  30.       }
  32.       p a {
  33.         text-decoration: none;
  34.         border: 1px solid;
  35.         padding: 0 8px;
  36.       }
  38.       .active {
  39.         background-color: #ddd;
  40.       }
  41.     </style>
  42.   </head>
  43.   <body>
  44.     <table>
  45.       <caption>
  46.         消费明细表表
  47.       </caption>
  48.       <thead>
  49.         <tr>
  50.           <th>id</th>
  51.           <th>金额</th>
  52.           <th>账户</th>
  53.           <th>成员</th>
  54.           <th>备注</th>
  55.           <th>用户id</th>
  56.         </tr>
  57.       </thead>
  58.       <tbody></tbody>
  59.     </table>
  60.     <!-- 分页条 -->
  61.     <p></p>
  62.   </body>
  63.   <script>
  64.     // 默认是第1页
  65.     var page = 1;
  67.     // 默认显示第一页,用一个函数来实现显示
  68.     getPageData(page);
  70.     // 分页函数
  71.     function getPageData(page) {
  72.       // ajax无刷新分页
  73.       $.ajax({
  74.         type: "post",
  75.         url: "page_data.php",
  76.         data: { page: page },
  77.         dataType: "json",
  78.         success: show,
  79.       });
  80.     }
  82.     // 数据显示函数
  83.     function show(data) {
  84.       // 1. 显示表格数据
  85.       console.log(data);
  86.       console.log(data.pages);
  87.       console.log(data.jizhang);
  89.       var str = "";
  90.       data.jizhang.forEach(function (staff) {
  91.         str += "<tr>";
  92.         str += "<td>" + staff.id + "</td>";
  93.         str += "<td>" + staff.jine + "</td>";
  94.         str += "<td>" + staff.zhanghu + "</td>";
  95.         str += "<td>" + staff.chengyuan + "</td>";
  96.         str += "<td>" + staff.beizhu + "</td>";
  97.         str += "<td>" + staff.yonghuid + "</td>";
  98.         str += "</tr>";
  99.       });
  101.       //   $("tbody").append(str);
  102.       $("tbody").html(str);
  104.       // 2. 显示分页条
  105.       var str = "";
  106.       for (var i = 1; i <= data.pages; i++) {
  107.         // $("<a>").attr("href", "").attr("data-index", i).html(i).appendTo("p");
  108.         str += '<a href="" data-index=' + i + ">" + i + "</a>";
  109.       }
  111.       // 将页码添到分页条, 并将第一个置为高亮
  112.       $("p").html(str).find("a").first().addClass("active");
  114.       // 分页条的点击事件
  115.       $("p a").click(function (ev) {
  116.         // 禁用<a>的跳转默认行为
  117.         ev.preventDefault();
  119.         var page = $(this).attr("data-index");
  121.         // $("a").$(this).attr("data-index").addClass("active");
  123.         $("tbody").html("");
  125.         getPageData(page);
  126.       });
  127.     }
  128.   </script>
  129. </html>

效果：

Correcting teacher：天蓬老师天蓬老师

Correction status：unqualified

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