search

博客列表 >Ajax事件、Ajax跨域请求，无刷新分页技术

Ajax事件、Ajax跨域请求，无刷新分页技术

，多思曩惜，
，多思曩惜，原创
2020年06月07日 20:46:05744浏览

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>事情</title>
  8.     <style>
  9.         body{
  10.             display: flex;
  11.             flex-flow: column nowrap;
  12.             align-items: center;
  13.         }
  14.         h2{
  15.             width: 300px;
  16.             text-align: center;
  17.             box-sizing: border-box;
  18.         }
  19.         form{
  20.             width:200px;
  21.             height: 300px;
  22.             display: grid;
  23.             gap: 10px;
  24.             display: flex;
  25.             flex-flow: column nowrap;
  26.             justify-content: space-evenly;
  27.             align-items: center;
  28.             align-content: center;
  29.         }
  30.         form > button:hover{
  31.             color :rgb(221, 0, 0);
  32.         }
  33.     </style>
  34. </head>
  35. <body>
  36.     <h2>User login:</h2>
  37.     <form action="">
  38.         <input type="text" placeholder="UserName" autofocus />
  39.         <input type="password" placeholder="Password" />
  40.         <button>submit</button>
  41.     </form>
  42. </body>
  43. </html>
  44. <script>
  45.     var cl =console.log.bind(console);
  46.     // 表单事件的绑定
  47.     $("form").submit(function(ev){
  48.         ev.preventDefault();
  49.     });
  50.     // 获取文本框用户名
  51.     // var user = $("input").first();
  52.     // 获取文本框用户名
  53.     var user  =$("input[type=text]");
  54.     // blur()失去焦点事件
  55.     user.blur(function(){
  56.         // 提示信息
  57.         var tips="";
  58.         // 用户列表
  59.         var users=["admin","big","xiaoming"];
  60.         // 非空验证
  61.         if($(this).val().length === 0){
  62.             tips="用户名不能为空";
  63.             // 焦点落在input上
  64.             $(this).focus();
  65.         }
  66.         // indexOf()：在数组中查询是否存在某个值，存在返回索引，否则返回1
  67.         else if (users.indexOf($(this).val()) === -1){
  68.             tips="用户名不存在"+"<button type='button'>请注册</button>";
  69.             // 设置焦点
  70.             $(this).focus();
  71.         }else{
  72.             tips = '<i style="color:green">用户名真确</i>';
  73.             // 焦点设置在密码框
  74.             $("input[type=password]").focus();
  75.         }
  76.         // 判断是否存在提示信息
  77.         if($(this).next().get(0).tagName !== 'SPAN')
  78.         // 将提示信息添加到页面上
  79.           $("<span>").html(tips).css("color", "red").insertAfter($(this));
  80.         // user.on("keydown" ,function(){
  81.         //     $(this).next('span').remove();
  82.         // })
  83.         // 当重新点击，删除提示信息
  84.         user.keydown(function(){
  85.             $(this).next('span').remove();
  86.         });
  87.     });
  88. </script>

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: 1 }, function (data) {
  44.         // cl(data);
  45.         // cl($(this));
  46.         // cl($(ev.target));
  47.         $(ev.target).after("<div>").next().html(data);
  48.     });
  49.   });
  51.   // 3. $.post():以post方式从服务器获取资源/数据
  52.   $("button:nth-of-type(3)").click(function (ev) {
  53.     //    $.post(url, data, callback)
  54.     $.post("users.php", { id: 2 }, function (data) {
  55.         cl(data);
  56.       $(ev.target).after("<div>").next().html(data);
  57.     });
  58.   });
  60.   // 4. $.getJSON():接口返回的大多是JSON
  61.   $("button:nth-of-type(4)").click(function (ev) {
  62.     //    $.getJSON(url, data, callback)
  63.     $.getJSON("users.php", { id: 2 }, function (data) {
  64.       // 返回就是js对象了, 不必转换
  65.       //   cl(JSON.parse(data));
  66.       // cl(data);
  67.       var res = data.id + ": " + data.name + ", " + data.age + "岁";
  68.       $(ev.target).after("<div>").next().html(res);
  69.     });
  70.   });
  72.   // 5. $.ajax(): 终级方法, 实际上大家只需要掌握这一个方法
  73.   //   $.ajax({
  74.   //     // 请求类型
  75.   //     type: "GET",
  76.   //     // 请求的URL
  77.   //     url: url,
  78.   //     // 发送的数据
  79.   //     data: data,
  80.   //     // 期望服务器返回/响应的数据类型
  81.   //     dataType: "json",
  82.   //     // 成功时的回调函数
  83.   //     success: callback,
  84.   //   });
  86.   $("button:nth-of-type(5)").click(function (ev) {
  87.     $.ajax({
  88.       type: "GET",
  89.       url: "users.php",
  90.       data: { id: 4 },
  91.       dataType: "html",
  92.       success: function (data) {
  93.         $(ev.target).after("<div>").next().html(data);
  94.       },
  95.     });
  96.   });
  98.   // http://localhost/0415php/0522/test2.php
  100.   // 6. $.ajax()-jsonp-1:跨域请求
  101.   $("button:nth-of-type(6)").click(function (ev) {
  102.     $.ajax({
  103.       type: "GET",
  104.       url: "http://localhost/0415php/0522/test2.php?jsonp=handle&id=1",
  105.       dataType: "jsonp",
  106.       success: function (data) {
  107.         // cl(data);
  108.         var data = JSON.parse(data);
  109.         // cl(data);
  110.         var data = "<p>" + data.title + "</p><p>" + data.user.name +", 邮箱:" +data.user.email +"</p>";
  111.         $(ev.target).after("<div>").next().html(data);
  112.       },
  113.     });
  114.   });
  116.   // 7. $.ajax()-jsonp-2:跨域请求
  117.   $("button:last-of-type").click(function (ev) {
  118.     $.ajax({
  119.       type: "GET",
  120.       url: "http://localhost/0415php/0522/test2.php?jsonp=?&id=1",
  121.       dataType: "jsonp",
  122.       jsonpCallback: "handle",
  123.     });
  124.   });
  125.   function handle(data) {
  126.     // cl(data);
  127.     var data = JSON.parse(data);
  128.     // cl(data);
  129.     var data = "<p>" + data.title + "</p><p>" + data.user.name +", 邮箱:" + data.user.email +"</p>";
  130.     $("button:last-of-type").after("<div>").next().html(data);
  131.   }
  132. </script>
  1. <?php
  3. $users = [
  4.     ['id' => 1, 'name' => '熊大', 'age' => 20],
  5.     ['id' => 2, 'name' => '熊二', 'age' => 18],
  6.     ['id' => 3, 'name' => '光头强', 'age' => 38],
  7. ];
  10. $id = intval($_REQUEST['id']);
  11. if (in_array($id, array_column($users, 'id'))) {
  12.     foreach ($users as  $user) {
  13.         if ($user['id'] === $id) {
  14.             vprintf('%s : %s %s 岁', $user);
  15.             // $_getJSON()返回返回json格式字符串
  16.             // echo json_encode($user);
  17.         }
  18.     }
  19. } else {
  20.     echo '<span style="color: red">没有找到</span>';
  21. }

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: #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: rgb(206, 101, 101);
  40.         border: 1px solid red;
  41.         color: white;
  42.       }
  43.     </style>
  44.   </head>
  45.   <body>
  46.     <table>
  47.       <caption>
  48.         员工信息表
  49.       </caption>
  50.       <thead>
  51.         <tr>
  52.           <th>id</th>
  53.           <th>姓名</th>
  54.           <th>年龄</th>
  55.           <th>性别</th>
  56.           <th>职位</th>
  57.           <th>手机号</th>
  58.         </tr>
  59.       </thead>
  60.       <tbody></tbody>
  61.     </table>
  62.     <!-- 分页条 -->
  63.     <p></p>
  64.   </body>
  65.   </html>
  66.   <script>
  67.     var cl =console.log.bind(console);
  68.     // 默认显示第一页
  69.     var page=1;
  70.     getPageData(page);
  71.     function getPageData(page){
  72.         $.ajax({
  73.             type:'post',
  74.             url:'page_data.php',
  75.             data:{page:page},
  76.             dataType:'json',
  77.             success:show,
  78.         });
  79.     }
  80.     function show(data){
  81.     //   cl(data);
  82.     // cl(data.pages);
  83.     // cl(data.staffs);
  84.     var str = "";
  85.     data.staffs.forEach(function(staff){
  86.         str +="<tr>";
  87.         str +="<td>" + staff.id + "</td>";
  88.         str += "<td>" + staff.name + "</td>";
  89.         str += "<td>" + staff.age + "</td>";
  90.         str += "<td>" + staff.sex + "</td>";
  91.         str +="<td>" +staff.position + "</td>";
  92.         str += "<td>" + staff.mobile + "</td>";
  93.         str +="</tr>";
  94.     });
  95.     // cl(str);
  96.     // $('tbody').append(str);
  97.     $('tbody').html(str);
  98.     var str = "";
  99.     for ( var i = 1 ; i <= data.pages; i++) {
  100.         // $('<a>').attr('href',"").attr('data-index',i).html(i).append("p");
  101.         str += '<a href="" data-index=' + i + ">" + i + "</a> ";
  102.     }
  103.     // $("p").html(str).find("a").first().addClass("active");
  104.     // 将页码添到分页条, 并将当前页置为高亮
  105.     $("p").html(str).find("a").eq(page - 1).addClass("active");
  106.     // cl(page);
  107.     $("p a").click(function (ev) {
  108.         ev.preventDefault();
  109.         page = $(this).attr("data-index");
  110.         // cl(page)
  111.         $("tbody").html("");
  112.         getPageData(page);
  113.         // cl(page);
  114.         });
  115.     }
  116.   </script>
  1. <?php
  2. // 链接数据库、
  3. $pdo = new PDO('mysql:host=localhost;dbname=phpedu', 'root', 'root');
  6. // 获取页数
  7. $page=$_POST['page'] ?? 1;
  8. // 每页显示的条数
  9. $num = 8 ;
  10. // 每页显示的偏移量
  11. $offset = ($page -1) * $num;
  12. // 总页数
  13. $sql = "SELECT CEIL(COUNT(`id`)/{$num}) AS `total` FROM `staffs`";
  14. $pages = $pdo->query($sql)->fetch()['total'];
  16. // 分页数据
  17. $sql = "SELECT * FROM `staffs` LIMIT {$num} OFFSET {$offset}";
  19. $staffs = $pdo->query($sql)->fetchAll(PDO::FETCH_ASSOC);
  21. // print_r($staffs);
  23. echo json_encode(['pages'=>$pages,'staffs'=>$staffs]);
  24. die;

总结

  • 学习了连个月，学会了很多知识，了解了很多知识，但是自己独立应用起来却困难重重。
  • 对于不会的需要多多学，多多练习
上一条：PHP框架 - laravel基础下一条：thinkphp5：模型中的输入与验证
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多