search

博客列表 >JQuery关于Ajax的使用和无刷新分页案例

JQuery关于Ajax的使用和无刷新分页案例

李东亚¹⁸⁰³⁹⁵⁴⁰¹²⁰
李东亚¹⁸⁰³⁹⁵⁴⁰¹²⁰原创
2020年06月01日 19:49:54981浏览

代码练习

1.关于ajax相关代码练习
1.1、登陆表单验证

  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>登陆表单前端验证</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">没有账号,点击此处注册!</a>
  97.       </div>
  98.     </form>
  99.   </body>
  100.   <script>
  101.     var cl = console.log.bind(console);
  102.     // var btu = $('input[type="submit"]');
  103.     //禁用表单的默认提交事件；
  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>

代码运行结果：

1.2、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.     <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()请求数据</button>
  19.       <button>$.get()请求数据</button>
  20.       <button>$.post()请求数据</button>
  21.       <button>$.getJSON请求数据</button>
  22.     </div>
  23.   </body>
  24.   <script>
  25.     var cl = console.log.bind(console);
  26.     //load()导入html片段
  27.     $("button")
  28.       .first()
  29.       .click(function (ev) {
  30.         // cl(this);//当前触发事件的对象,等同于ev.target
  31.         // cl(ev.target);//当前触发事件的对象，等同于this
  32.         // cl(ev.currentTarget);//当前绑定事件的对象DIV
  33.         ev.preventDefault(); //ev当前点击的行为
  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.           //要求返回的数据必须时JSON格式
  74.           cl(data);
  75.           $(that).after('<span style="color:red">' + data.name + "<span>");
  76.         });
  77.       });
  78.   </script>
  79. </html>

代码运行效果图

1.3 demo2代码练习

  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()请求数据</button>
  19.       <button>$.Ajax()-JSONP跨域请求1数据</button>
  20.       <button>$.Ajax()—JSONP跨域请求2数据</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请求函数
  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>

运行代码效果图

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>入职时间</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.     //页面生成函数
  67.     var page = 1;
  68.     get(page);
  69.     // 点击页面生成新的页面内容下;
  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.       //生产页码
  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>

运行结果图

总结:

1.JQuery对于事件有关的函数:

  1. .submit(function(ev){});提交事件函数
  2. .blur(function(){});失去焦点事件函数
  3. .focus(function(){});获取焦点函数
  4. .keydown()|keyup();键盘按键函数

2.$.Ajax()相关事件函数:

  1. $.load();加载html片段;
  2. $.get(url,data,function(repesondata){});get请求数据
  3. $.post(url,data,function(repesondata){});post请求函数
  4. $.Ajax({type: "GET",url: url,data: data,dataType: "json",success: callback,});通过请求函数

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

上一条：PHP基础：命名空间基础知识及类文件的自动加载下一条：JavaScript：留言板和选项卡小案例
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多