简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > Ajax事件、Ajax跨域请求，无刷新分页技术
Blogger Information
Blog 28
fans 0
comment 0
visits 25936
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
Ajax事件、Ajax跨域请求，无刷新分页技术
，多思曩惜，
Original
742 people have browsed it

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;

总结

  • 学习了连个月，学会了很多知识，了解了很多知识，但是自己独立应用起来却困难重重。
  • 对于不会的需要多多学，多多练习
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：一期比一期难, 好好努力吧少年
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！