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

搜索
博主信息
博文 145
粉絲 7
評論 7
訪問量 198878
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
JQuery關(guān)于Ajax的使用和無刷新分頁案例
李東亞1??3????12?
原創(chuàng)
1111人瀏覽過

代碼練習(xí)

1.關(guān)于ajax相關(guān)代碼練習(xí)
1.1、登陸表單驗(yàn)證

  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="../JQuery3.5.1.js"></script>
  7.     <title>登陸表單前端驗(yàn)證</title>
  8.     <style>
  9.       * {
  10.         margin: 0;
  11.         padding: 0;
  12.       }
  14.       h2 {
  15.         /* display: block; */
  16.         width: 350px;
  17.         margin: 0 auto;
  18.         text-align: center;
  19.         padding-top: 10px;
  20.         box-sizing: border-box;
  21.       }
  23.       form {
  24.         margin: 10px auto;
  25.         width: 350px;
  26.         height: 250px;
  27.         background-color: #5384e8;
  28.         display: flex;
  29.         flex-flow: column nowrap;
  30.         justify-content: space-evenly;
  31.         align-content: center;
  32.         align-items: center;
  33.         font-size: 1.2rem;
  34.       }
  36.       form:hover {
  37.         box-shadow: 0 0 5px #626262;
  38.       }
  40.       form > .button {
  41.         width: 280px;
  42.         display: flex;
  43.         justify-content: space-evenly;
  44.       }
  46.       form > .button > input {
  47.         width: 100px;
  48.         height: 30px;
  49.         background-color: #00bb00;
  50.         border: none;
  51.         border-radius: 15px;
  52.       }
  54.       form > .button > input:hover {
  55.         background-color: red;
  56.         color: white;
  57.       }
  59.       a {
  60.         color: white;
  61.         text-decoration: none;
  62.       }
  63.     </style>
  64.   </head>
  66.   <body>
  67.     <h2 data-index="one">用戶注冊</h2>
  68.     <form method="POST" onsubmit="return false">
  69.       <div class="account">
  70.         <label for="username">賬戶：</label>
  71.         <input
  72.           type="email"
  73.           required
  74.           name="username"
  75.           id="username"
  76.           placeholder="example@163.com"
  77.           autofocus="autofocus"
  78.         />
  79.       </div>
  80.       <div class="pwd">
  81.         <label for="p2">密碼：</label>
  82.         <input
  83.           type="password"
  84.           required
  85.           name="p2"
  86.           id="p2"
  87.           placeholder="不少于六位"
  88.         />
  89.       </div>
  91.       <div class="button">
  92.         <input type="submit" value="登陸" />
  93.         <input type="reset" value="重置" />
  94.       </div>
  95.       <div>
  96.         <a href="regist.php">沒有賬號,點(diǎn)擊此處注冊!</a>
  97.       </div>
  98.     </form>
  99.   </body>
  100.   <script>
  101.     var cl = console.log.bind(console);
  102.     // var btu = $('input[type="submit"]');
  103.     //禁用表單的默認(rèn)提交事件；
  104.     // $("form").submit(function (ev) {
  105.     //   ev.preventDefault();
  106.     // });
  107.     $('input[type="email"]').blur(function () {
  108.       var tips = "";
  109.       var color = "";
  110.       //   cl(this);
  111.       if ($(this).val().length === 0) {
  112.         tips = "用戶名不能為空";
  113.         color = "red";
  114.       }
  115.       if (tips.length != 0) {
  116.         $(this)
  117.           .parent()
  118.           .after(
  119.             "<span style=' font-size:8px;color:" +
  120.               color +
  121.               "''>" +
  122.               tips +
  123.               "</span>"
  124.           );
  125.       }
  126.     });
  127.     $("input[type='email']").focus(function () {
  128.       cl();
  129.       if ($(this).parent().next().get(0).tagName === "SPAN")
  130.         $(this).parent().next().get(0).remove();
  131.     });
  132.     $('input[type="password"]').blur(function () {
  133.       var tips = "";
  134.       var color = "";
  135.       //   cl(this);
  136.       if ($(this).val().length === 0) {
  137.         tips = "密碼不能為空";
  138.         color = "red";
  139.       } else if ($(this).val().length <= 6) {
  140.         cl(tips);
  141.         tips = "密碼不能少于6位";
  142.         color = "red";
  143.       } else {
  144.         tips = "";
  145.       }
  146.       if (tips.length != 0) {
  147.         $(this)
  148.           .parent()
  149.           .after(
  150.             "<span style=' font-size:8px;color:" +
  151.               color +
  152.               "''>" +
  153.               tips +
  154.               "</span>"
  155.           );
  156.       }
  157.     });
  158.     $("input[type='password']").focus(function () {
  159.       cl();
  160.       if ($(this).parent().next().get(0).tagName === "SPAN")
  161.         $(this).parent().next().get(0).remove();
  162.     });
  163.   </script>
  164. </html>

代碼運(yùn)行結(jié)果：

1.2、JQuery有關(guān)Ajax的代碼練習(xí)

  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="../JQuery3.5.1.js"></script>
  7.     <title>Document</title>
  8.     <style>
  9.       .Ajax {
  10.         display: flex;
  11.         flex-flow: column nowrap;
  12.       }
  13.     </style>
  14.   </head>
  15.   <body>
  16.     <h2>Ajax</h2>
  17.     <div class="Ajax">
  18.       <button>load()請求數(shù)據(jù)</button>
  19.       <button>$.get()請求數(shù)據(jù)</button>
  20.       <button>$.post()請求數(shù)據(jù)</button>
  21.       <button>$.getJSON請求數(shù)據(jù)</button>
  22.     </div>
  23.   </body>
  24.   <script>
  25.     var cl = console.log.bind(console);
  26.     //load()導(dǎo)入html片段
  27.     $("button")
  28.       .first()
  29.       .click(function (ev) {
  30.         // cl(this);//當(dāng)前觸發(fā)事件的對象,等同于ev.target
  31.         // cl(ev.target);//當(dāng)前觸發(fā)事件的對象，等同于this
  32.         // cl(ev.currentTarget);//當(dāng)前綁定事件的對象DIV
  33.         ev.preventDefault(); //ev當(dāng)前點(diǎn)擊的行為
  34.         if ($(this).next().get(0).tagName != "DIV")
  35.           $(this).after("<div>").next().load("docment.html");
  36.       });
  37.     cl($("button").eq(1).text()); //eq(index)index是從零開始的
  38.     //$.get()請求
  39.     $("button")
  40.       .eq(1)
  41.       .click(function (ev) {
  42.         ev.preventDefault();
  43.         // cl(this);
  44.         var that = this;
  45.         $.get("data.php", "id=3", function (data) {
  46.           //   cl(data);
  48.           $(that).after('<span style="color:red">' + data + "<span>");
  49.         });
  50.       });
  51.     //$.post()請求
  52.     $("button")
  53.       .eq(2)
  54.       .click(function (ev) {
  55.         ev.preventDefault();
  56.         // cl(this);
  57.         var that = this;
  58.         $.post("data.php", "id=3", function (data) {
  59.           //   cl(data);
  61.           $(that).after('<span style="color:red">' + data + "<span>");
  62.         });
  63.       });
  64.     //$.getJSON()請求
  65.     $("button")
  66.       .last()
  67.       .click(function (ev) {
  68.         ev.preventDefault();
  69.         var that = this;
  70.         $.getJSON("data.php", "{id:3}", function (data) {
  71.           //   var data = JSON.parse(data);
  72.           //   return "你好！";
  73.           //要求返回的數(shù)據(jù)必須時(shí)JSON格式
  74.           cl(data);
  75.           $(that).after('<span style="color:red">' + data.name + "<span>");
  76.         });
  77.       });
  78.   </script>
  79. </html>

代碼運(yùn)行效果圖

1.3 demo2代碼練習(xí)

  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>Document</title>
  7.     <script src="../JQuery3.5.1.js"></script>
  8.     <style>
  9.       .Ajax {
  10.         display: flex;
  11.         flex-flow: column nowrap;
  12.       }
  13.     </style>
  14.   </head>
  15.   <body>
  16.     <h2>Ajax</h2>
  17.     <div class="Ajax">
  18.       <button>$.Ajax()請求數(shù)據(jù)</button>
  19.       <button>$.Ajax()-JSONP跨域請求1數(shù)據(jù)</button>
  20.       <button>$.Ajax()—JSONP跨域請求2數(shù)據(jù)</button>
  21.     </div>
  22.   </body>
  23.   <script>
  24.     var cl = console.log.bind(console);
  25.     var first = $("button:first-child");
  26.     // cl(first);
  27.     //$.ajax()=XMLHttpRequest請求函數(shù)
  28.     first.click(function (ev) {
  29.       ev.preventDefault();
  30.       var that = this;
  31.       $.ajax({
  32.         type: "GET",
  33.         url: "docment.html",
  34.         dataType: "html",
  35.         success: function (data) {
  36.           //   cl(data);
  37.           cl(that);
  38.           $(that).after(data);
  39.         },
  40.       });
  41.     });
  42.     //$.ajax()跨域請求
  43.     $("button:nth-child(2)").click(function (ev) {
  44.       ev.preventDefault();
  45.       // var that = this;
  46.       $.ajax({
  47.         type: "GET",
  48.         url: "http://php.edu/cors/demo1.php?jsonp=?&word=hello",
  49.         // data: "id=1",
  50.         dataType: "jsonp",
  51.         jsonpCallback: "index",
  52.       });
  53.     });
  54.     var hello = "hello,China!";
  55.     function index(data) {
  56.       // cl(data);
  57.       // cl(that);
  58.       $("button:nth-child(2)").after("<span>" + data + "</span>");
  59.     }
  60.     $("button:last-child").click(function (ev) {
  61.       ev.preventDefault();
  62.       var that = this;
  63.       $.ajax({
  64.         type: "GET",
  65.         url: "http://php.edu/cors/demo1.php?jsonp=?&word=hello",
  66.         // data: "id=1",
  67.         dataType: "jsonp",
  68.         success: function (data) {
  69.           cl(data);
  70.           $(that).after(data);
  71.         },
  72.       });
  73.     });
  74.   </script>
  75. </html>

運(yùn)行代碼效果圖

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.     <title>員工信息表</title>
  7.     <script src="../JQuery3.5.1.js"></script>
  8.     <style>
  9.       body > div {
  10.         width: 700px;
  11.         margin: 0 auto;
  12.         outline: 1px solid red;
  13.         display: flex;
  14.         flex-flow: column nowrap;
  15.         align-items: center;
  16.       }
  18.       p {
  19.         height: 25px;
  20.         display: flex;
  21.         justify-content: flex-start;
  22.         align-items: center;
  23.       }
  25.       p a {
  26.         text-decoration: none;
  27.         width: 38px;
  28.         text-align: center;
  29.         margin: 0 3px;
  30.       }
  32.       .active {
  33.         background-color: tomato;
  34.         color: white;
  35.       }
  36.       p a:hover {
  37.         cursor: pointer;
  38.       }
  39.     </style>
  40.   </head>
  42.   <body>
  43.     <div>
  44.       <table border="1" cellspacing="0" cellpadding="10">
  45.         <caption style="font-size: 28px;">
  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.             <th>入職時(shí)間</th>
  57.           </tr>
  58.         </thead>
  59.         <tbody></tbody>
  60.       </table>
  61.       <p></p>
  62.     </div>
  63.   </body>
  64.   <script>
  65.     var cl = console.log.bind(console);
  66.     //頁面生成函數(shù)
  67.     var page = 1;
  68.     get(page);
  69.     // 點(diǎn)擊頁面生成新的頁面內(nèi)容下;
  70.     $("p").click(function (ev) {
  71.       // cl(ev.target);
  72.       page = $(ev.target).data("index");
  73.       $("tbody").html("");
  74.       $("p").html("");
  76.       get(page);
  77.     });
  78.     function get(page) {
  79.       $.ajax({
  80.         type: "GET",
  81.         url: "http://php.edu/pages/contect.php",
  82.         data: { p: page },
  83.         dataType: "jsonp",
  84.         jsonpCallback: "view",
  85.       });
  86.     }
  87.     function view(data) {
  88.       // cl(data);
  89.       // cl(data.pages);
  90.       //生產(chǎn)頁碼
  91.       for (var i = 1; i <= data.pages; i++) {
  92.         if (i === page) {
  93.           $("p").append(
  94.             "<a class='active' data-index='" + i + "'>" + i + "</a>"
  95.           );
  96.         } else {
  97.           $("p").append("<a data-index='" + i + "'>" + i + "</a>");
  98.         }
  99.       }
  100.       //生成員工信息表
  101.       var staffs = data.data;
  102.       // cl(staffs);
  103.       var res = "";
  104.       staffs.forEach(function (item) {
  105.         staff =
  106.           "<tr><td>" +
  107.           item.id +
  108.           "</td><td>" +
  109.           item.name +
  110.           "</td><td>" +
  111.           item.age +
  112.           "</td><td>" +
  113.           item.sex +
  114.           "</td><td>" +
  115.           item.position +
  116.           "</td><td>" +
  117.           item.mobile +
  118.           "</td><td>" +
  119.           item.hiredate +
  120.           "</td></tr>";
  121.         // cl(staff);
  122.         res += staff;
  123.       });
  124.       // cl(res);
  125.       // cl($("tbody"));
  126.       $($("tbody")[0]).html(res);
  127.     }
  128.   </script>
  129. </html>

運(yùn)行結(jié)果圖

總結(jié):

1.JQuery對于事件有關(guān)的函數(shù):

  1. .submit(function(ev){});提交事件函數(shù)
  2. .blur(function(){});失去焦點(diǎn)事件函數(shù)
  3. .focus(function(){});獲取焦點(diǎn)函數(shù)
  4. .keydown()|keyup();鍵盤按鍵函數(shù)

2.$.Ajax()相關(guān)事件函數(shù):

  1. $.load();加載html片段;
  2. $.get(url,data,function(repesondata){});get請求數(shù)據(jù)
  3. $.post(url,data,function(repesondata){});post請求函數(shù)
  4. $.Ajax({type: "GET",url: url,data: data,dataType: "json",success: callback,});通過請求函數(shù)

3.跨域請求函數(shù):
$.Ajax({type: "GET",url: url,data: data,dataType: "jsonp",jsonpCallback:函數(shù)名,});跨域請求函數(shù)

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

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

老師批語：作業(yè)中推薦寫一些沒有講到的方法, 這些都在手冊中, 不能只會用學(xué)過的
本博文版權(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é)