亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 52
粉絲 0
評論 3
訪問量 53037
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
js學(xué)習(xí)：第21章 事件與Ajax實(shí)戰(zhàn)、無刷分頁（補(bǔ)）
王小飛
原創(chuàng)
1443人瀏覽過

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()請求數(shù)據(jù)</button>
  25.     <button type="button">2. $.get()請求數(shù)據(jù)</button>
  26.     <button type="button">3. $.post()請求數(shù)據(jù)</button>
  27.     <button type="button">4. $.getJSON()請求JSON數(shù)據(jù)</button>
  28.     <button type="button">5. $.ajax()請求數(shù)據(jù)</button>
  29.     <button type="button">6. $.ajax()-jsonp-跨域請求數(shù)據(jù)1</button>
  30.     <button type="button">7. $.ajax()-jsonp-跨域請求數(shù)據(jù)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方式從服務(wù)器獲取資源/數(shù)據(jù)
  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方式從服務(wù)器獲取資源/數(shù)據(jù)
  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對象了, 不必轉(zhuǎn)換
  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(): 終級方法, 實(shí)際上大家只需要掌握這一個(gè)方法
  71.   //   $.ajax({
  72.   //     // 請求類型
  73.   //     type: "GET",
  74.   //     // 請求的URL
  75.   //     url: url,
  76.   //     // 發(fā)送的數(shù)據(jù)
  77.   //     data: data,
  78.   //     // 期望服務(wù)器返回/響應(yīng)的數(shù)據(jù)類型
  79.   //     dataType: "json",
  80.   //     // 成功時(shí)的回調(diào)函數(shù)
  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無刷新分頁技術(shù)</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.         消費(fèi)明細(xì)表表
  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.     // 默認(rèn)是第1頁
  65.     var page = 1;
  67.     // 默認(rèn)顯示第一頁,用一個(gè)函數(shù)來實(shí)現(xiàn)顯示
  68.     getPageData(page);
  70.     // 分頁函數(shù)
  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.     // 數(shù)據(jù)顯示函數(shù)
  83.     function show(data) {
  84.       // 1. 顯示表格數(shù)據(jù)
  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.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.         // 將頁碼添到分頁條, 并將當(dāng)前頁置為高亮
  112.         $("p")
  113.         .html(str)
  114.         .find("a")
  115.         .eq(page - 1)
  116.         .addClass("active");
  119.       // 分頁條的點(diǎn)擊事件
  120.       $("p a").click(function (ev) {
  121.         // 禁用<a>的跳轉(zhuǎn)默認(rèn)行為
  122.         ev.preventDefault();
  123.         page = $(this).attr("data-index");
  124.         $("tbody").html("");
  125.         getPageData(page);
  126.       });
  127.     }
  128.   </script>
  129. </html>

效果：

批改老師：天蓬老師天蓬老師

批改狀態(tài)：合格

老師批語：設(shè)置頁碼高亮是不是超級簡單, 就一個(gè)窗戶紙
本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報(bào)處理！
全部評論 文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務(wù)協(xié)議
0條評論
作者最新博文
關(guān)于我們 免責(zé)申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長！
關(guān)注服務(wù)號 技術(shù)交流群
PHP中文網(wǎng)訂閱號
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時(shí)隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學(xué)習(xí)！
    全站2000+教程免費(fèi)學(xué)