search

博客列表 >Ajax跨域请求与无刷新分页技术

Ajax跨域请求与无刷新分页技术

蔚蓝世纪
蔚蓝世纪原创
2020年05月31日 15:12:41776浏览

一、Ajax跨域请求分为以下7种

  1. load()请求数据
  2. $.get()请求数据
  3. $.post()请求数据
  4. $.getJSON()请求JSON数据
  5. $.ajax()请求数据
  6. $.ajax()-jsonp-跨域请求数据
  7. $.ajax()-jsonp-跨域请求数据

代码演示：

  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.         width: 200px;
  11.         display: grid;
  12.         gap: 15px;
  13.       }
  14.       button {
  15.         text-align: left;
  16.         height: 26px;
  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.   </body>
  33.   <script>
  34.     // 1.load()请求数据 ：加载html片断
  35.     $("button:first-of-type").click(function () {
  36.       //   console.log($(this));
  37.       $(this).after("<div>").next().load("nav.html");
  38.     });
  40.     //2.$.get():以get方式从服务器获取资源/数据
  41.     $("button:nth-of-type(2)").click(function (ev) {
  42.       //   console.log($(this));
  43.       //   $.get(url,data,callback)
  44.       $.get("users.php", { id: 2 }, function (data) {
  45.         // console.log(data);
  46.         $(ev.target).after("<div>").next().html(data);
  47.       });
  48.     });
  50.     //3.$.post():以post方式从服务器获取资源/数据
  51.     $("button:nth-of-type(3)").click(function (ev) {
  52.       //   console.log($(this));
  53.       //   $.post(url,data,callback)
  54.       $.post("users.php", { id: 4 }, function (data) {
  55.         // console.log(data);
  56.         $(ev.target).after("<div>").next().html(data);
  57.       });
  58.     });
  60.     //4.$.getJSON():接口返回的大多是JSON
  61.     $("button:nth-of-type(3)").click(function (ev) {
  62.       //   console.log($(this));
  63.       //   $.get(url,data,callback)
  64.       $.getJSON("users.php?id=2", function (data) {
  65.         //返回的就是JS对象，不必再转换
  66.         //console.log(JSON,parse(data));
  67.         console.log(data);
  68.         var res = data.id + ":" + data.name + "," + data.age + "岁";
  69.         $(ev.target).after("<div>").next().html(data);
  70.       });
  71.     });
  73.     // 5. $.ajax(): 终级方法，该方法的参数是一个对象自变量,前面4种方法可以放弃，只需要掌握这一个方法,方便快捷。
  74.     // $.ajax({
  75.     //   //请求类型
  76.     //   type: "GET",
  77.     //   //请求URL
  78.     //   url: url,
  79.     //   //发送的数据
  80.     //   data: data,
  81.     //   //期望服务器返回/响应的数据类型
  82.     //   dataType: "json",
  83.     //   //成功时的回调函数
  84.     //   success: callback,
  85.     // });
  87.     $("button:nth-of-type(5)").click(function (ev) {
  88.       $.ajax({
  89.         type: "GET",
  90.         url: "users.php",
  91.         data: { id: 3 },
  92.         dataType: "html",
  93.         success: function (data) {
  94.           $(ev.target).after("<div>").next().html(data);
  95.         },
  96.       });
  97.     });
  99.     //6.$.ajax()-jsonp-1:跨域请求数据
  100.     $("button:nth-of-type(6)").click(function (ev) {
  101.       $.ajax({
  102.         type: "GET",
  103.         url: "http://php.edu/0522/test2.php?jsonp=?&id=1",
  104.         dataType: "jsonp",
  105.         success: function (data) {
  106.           console.log(data);
  107.           var data = JSON.parse(data);
  108.           console.log(data);
  109.           var data =
  110.             "<p>" +
  111.             data.title +
  112.             "</p><p>" +
  113.             data.user.name +
  114.             ", 邮箱:" +
  115.             data.user.email +
  116.             "</p>";
  117.           $(ev.target).after("<div>").next().html(data);
  118.         },
  119.       });
  120.     });
  122.     //7.$.ajax()-jsonp-2:跨域请求数据
  123.     $("button:last-of-type").click(function (ev) {
  124.       $.ajax({
  125.         type: "GET",
  126.         url: "http://php.edu/0522/test2.php?jsonp=?&id=2",
  127.         dataType: "jsonp",
  128.         jsonpCallback: "handle",
  129.       });
  130.     });
  131.     function handle(data) {
  132.       console.log(data);
  133.       var data = JSON.parse(data);
  134.       console.log(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>
  146. </html>

输出效果：

二、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.       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: rgb(70, 233, 245);
  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: rgb(70, 233, 245);
  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>手机号</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.staffs);
  89.       var str = "";
  90.       data.staffs.forEach(function (staff) {
  91.         str += "<tr>";
  92.         str += "<td>" + staff.id + "</td>";
  93.         str += "<td>" + staff.name + "</td>";
  94.         str += "<td>" + staff.age + "</td>";
  95.         str += "<td>" + staff.sex + "</td>";
  96.         str += "<td>" + staff.position + "</td>";
  97.         str += "<td>" + staff.mobile + "</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");
  113.       //将页码添到分页条, 并将最后一个设置为高亮 $("p").html(str).find("a").last().addClass("active");
  115.       // 将当前页码设置为高亮
  116.       $("p")
  117.         .html(str)
  118.         .find("a")
  119.         .eq(page - 1)
  120.         .addClass("active");
  122.       // 分页条的点击事件
  123.       $("p a").click(function (ev) {
  124.         // 禁用<a>的跳转默认行为
  125.         ev.preventDefault();
  127.         var page = $(this).attr("data-index");
  129.         $("tbody").html("");
  131.         getPageData(page);
  132.       });
  133.     }
  134.   </script>
  135. </html>

输出效果：

三、总结
1.代码执行过程中，使用Chrome浏览器预览时Ajax请求出现“Method Not Allowed 405”错误，表格数据无法加载，而firefox浏览器显示正常。百度到的解决方法：
　　打开Chrome快捷方式的属性中设置：
　　右击Chrome浏览器快捷方式，选择“属性”，
　　在“目标”中加上”—allow-file-access-from-files”，注意前面有个空格，
　　重启Chrome浏览器便可。
2.写代码的过程中一定要添加注释，注释是后期进行数据维护的依据。

上一条：Thinkphp5 模型和关联下一条：JS进阶知识：JQuery基础操作
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多