Community Learn Tools Library Leisure
search
English
Home > List of blog posts > Ajax无刷新上传
Blogger Information
Blog 28
fans 0
comment 0
visits 21978
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无刷新上传
暝皑祯π_π
Original
846 people have browsed it

login.php

  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.     <style>
  8.       form {
  9.         background-color: aqua;
  10.         display: grid;
  11.         gap: 15px;
  12.         width: 200px;
  13.         padding: 20px;
  14.         border-radius: 15px;
  15.         margin: auto;
  16.       }
  17.     </style>
  18.   </head>
  19.   <body>
  20.     <nav></nav>
  21.     <form action="" method="POST" onsubmit="return false">
  22.       <div>
  23.         <label for="email">名称：</label>
  24.         <input
  25.           type="email"
  26.           name="email"
  27.           placeholder="请输入"
  28.           required
  29.           autofocus
  30.         />
  31.       </div>
  32.       <div>
  33.         <label for="password">密码：</label>
  34.         <input type="password" name="password" placeholder="******" required />
  35.       </div>
  36.       <div>
  37.         <button>登录</button>
  38.       </div>
  39.     </form>
  40.     </body>
  41.     <script src="login.js"></script>
  42. </html>

login.js

  1. // 获取form表单
  2. var form = document.querySelector("form");
  3. var but = document.querySelector("form button");
  5. but.onclick = function () {
  6.   // 1. 创建Ajax对象
  7.   var xhr = new XMLHttpRequest();
  9.   // 2. 监听请求
  10.   xhr.onreadystatechange = function () {
  11.     if (xhr.readyState === 4 && xhr.status === 200) {
  12.       console.log(xhr.responseText);
  14.       // 将jsonl转js对象
  15.       var res = JSON.parse(xhr.responseText);
  16.       // console.log(res);
  18.       switch (res.status) {
  19.         case 0:
  20.         case 1:
  21.           dates = res.message;
  22.           break;
  23.         default:
  24.           error = "未知错误";
  25.       }
  27.       // 将提示显示到表单中
  28.       var span = document.createElement("span");
  29.       span.innerHTML = dates;
  30.       span.style.color = "red";
  31.       form.appendChild(span);
  32.     }
  33.   };
  35.   // 3. 初始化请求参数
  36.   xhr.open("POST", "Ajax.php", true);
  38.   // FormData
  39.   var data = new FormData(form);
  40.   data.append("login_time", new Date().getTime());
  42.   // 5. 发送请求
  43.   xhr.send(data);
  44. };
  46. // 清除提示信息
  47. var inputs = document.querySelectorAll("input");
  49. for (var i = 0; i < inputs.length; i++) {
  50.   inputs[i].oninput = function () {
  51.     if (but.nextElementSibling !== null)
  52.       form.removeChild(but.nextElementSibling);
  53.   };
  54. }

Ajax.php

  1. <?php
  2. session_start();
  3. // 拿到前端数据
  4. // echo $_POST['email'];
  5. // echo $_POST['password'];
  8. // 连接数据库
  9. $pdo = new PDO("mysql:host=js.cn;dbname=php","root","root");
  10. // 查询数据库中保存的用户信息
  11. $stmt = $pdo->prepare("SELECT * FROM `users`");
  12. $stmt->execute();
  13. $statues = $stmt->fetchall(PDO::FETCH_ASSOC);
  14. // print_r($statues) ;
  17. // 判断请求是否 正确
  18. if($_SERVER['REQUEST_METHOD'] === 'POST'){
  19. // 获取需要验证的信息
  21. $email = $_POST['email'];
  22. $password = md5($_POST['password']);
  24. $results = array_filter($statues, function($statue) use ($email, $password) {
  25.     return $statue['email'] === $email && $statue['password'] === $password;  //&&：且
  26.  });
  29. //  count：计算数组的单元数目
  30. // 如果results === 1;说明用户存在
  32.     if (count($results) === 1) {
  34.         $_SESSION['user'] = serialize(array_pop($results));
  35.         echo json_encode(['status'=>1, 'message'=>'验证通过']);
  36.     } else {
  37.         echo json_encode(['status'=>0, 'message'=>'邮箱或密码错误']);
  39.     }
  40. }

Ajax:get和post

  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.   </head>
  8.   <body>
  9.     <script>
  10.       // GET请求
  11.       // 创建Ajax对象
  12.       var xhr = new XMLHttpRequest();
  13.       // 监听请求回调
  14.       xhr.onreadystatechange = function () {
  15.         if (xhr.readyState == 4 && xhr.status == 200) {
  16.           console.log(xhr.responseText);
  17.         }
  18.       };
  19.       // 初始化请求参数
  20.       xhr.open("get", "test8.php", true);
  21.       // 发送请求
  22.       xhr.send(null);
  24.       //   第一种POST请求
  25.       // 创建Ajax对象
  26.       var xhr = new XMLHttpRequest();
  27.       // 监听请求回调
  28.       xhr.onreadystatechange = function () {
  29.         if (xhr.readyState == 4 && xhr.status == 200) {
  30.           console.log(xhr.responseText);
  31.         }
  32.       };
  33.       // 初始化请求参数
  34.       xhr.open("post", "test6.php", true);
  35.       //   设置请求头：说明我要发送的是什么类型的数据
  36.       xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
  37.       // 要发送的数据
  38.       var user = {
  39.         email: "php@qq.com",
  40.         password: "123456",
  41.       };
  42.       //   将数据进行josn序列化
  43.       var date = JSON.stringify(user);
  45.       // 发送请求
  46.       xhr.send(date);
  48.       //   第二种post请求
  49.       // 通过请求头的设置，直接把发送的进行序列化发送，php免去反序列化的步骤，利用php://input接受数据
  50.       // 创建Ajax对象
  51.       var xhr = new XMLHttpRequest();
  52.       // 监听请求回调
  53.       xhr.onreadystatechange = function () {
  54.         if (xhr.readyState == 4 && xhr.status == 200) {
  55.           console.log(xhr.responseText);
  56.         }
  57.       };
  58.       // 初始化请求参数
  59.       xhr.open("post", "test6.php", true);
  60.       //   设置请求头：说明我要发送的是什么类型的数据
  61.       xhr.setRequestHeader("content-type", "application/json;charset=utf-8");
  62.       // 要发送的数据
  63.       var user = {
  64.         email: "html@qq.com",
  65.         password: "123456",
  66.       };
  67.       //   将数据进行josn序列化
  68.       var date = JSON.stringify(user);
  70.       // 发送请求
  71.       xhr.send(date);
  72.     </script>
  73.   </body>
  74. </html>

总结

  • 把通过 按钮提交的表单信息同Ajax的方式进行提交，可以实现无刷新显示页面。
  • Ajax的两种请求方式
    • 1 GET
    • 2 POST
    • POS可以通过不同的请求头设置不同的提交数据类型
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