Ajax无刷新上传

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>登录</title>
    <style>
      form {
        background-color: aqua;
        display: grid;
        gap: 15px;
        width: 200px;
        padding: 20px;
        border-radius: 15px;
        margin: auto;
      }
    </style>
  </head>
  <body>
    <nav></nav>
    <form action="" method="POST" onsubmit="return false">
      <div>
        <label for="email">名称：</label>
        <input
          type="email"
          name="email"
          placeholder="请输入"
          required
          autofocus
        />
      </div>
      <div>
        <label for="password">密码：</label>
        <input type="password" name="password" placeholder="******" required />
      </div>
      <div>
        <button>登录</button>
      </div>
    </form>
    </body>
    <script src="login.js"></script>
</html>

// 获取form表单
var form = document.querySelector("form");
var but = document.querySelector("form button");
but.onclick = function () {
  // 1. 创建Ajax对象
  var xhr = new XMLHttpRequest();
  // 2. 监听请求
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      console.log(xhr.responseText);
      // 将jsonl转js对象
      var res = JSON.parse(xhr.responseText);
      // console.log(res);
      switch (res.status) {
        case 0:
        case 1:
          dates = res.message;
          break;
        default:
          error = "未知错误";
      }
      // 将提示显示到表单中
      var span = document.createElement("span");
      span.innerHTML = dates;
      span.style.color = "red";
      form.appendChild(span);
    }
  };
  // 3. 初始化请求参数
  xhr.open("POST", "Ajax.php", true);
  // FormData
  var data = new FormData(form);
  data.append("login_time", new Date().getTime());
  // 5. 发送请求
  xhr.send(data);
};
// 清除提示信息
var inputs = document.querySelectorAll("input");
for (var i = 0; i < inputs.length; i++) {
  inputs[i].oninput = function () {
    if (but.nextElementSibling !== null)
      form.removeChild(but.nextElementSibling);
  };
}

Ajax.php

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

Ajax:`get`和`post`

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // GET请求
      // 创建Ajax对象
      var xhr = new XMLHttpRequest();
      // 监听请求回调
      xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
          console.log(xhr.responseText);
        }
      };
      // 初始化请求参数
      xhr.open("get", "test8.php", true);
      // 发送请求
      xhr.send(null);
      //   第一种POST请求
      // 创建Ajax对象
      var xhr = new XMLHttpRequest();
      // 监听请求回调
      xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
          console.log(xhr.responseText);
        }
      };
      // 初始化请求参数
      xhr.open("post", "test6.php", true);
      //   设置请求头：说明我要发送的是什么类型的数据
      xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
      // 要发送的数据
      var user = {
        email: "php@qq.com",
        password: "123456",
      };
      //   将数据进行josn序列化
      var date = JSON.stringify(user);
      // 发送请求
      xhr.send(date);
      //   第二种post请求
      // 通过请求头的设置，直接把发送的进行序列化发送，php免去反序列化的步骤，利用php://input接受数据
      // 创建Ajax对象
      var xhr = new XMLHttpRequest();
      // 监听请求回调
      xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
          console.log(xhr.responseText);
        }
      };
      // 初始化请求参数
      xhr.open("post", "test6.php", true);
      //   设置请求头：说明我要发送的是什么类型的数据
      xhr.setRequestHeader("content-type", "application/json;charset=utf-8");
      // 要发送的数据
      var user = {
        email: "html@qq.com",
        password: "123456",
      };
      //   将数据进行josn序列化
      var date = JSON.stringify(user);
      // 发送请求
      xhr.send(date);
    </script>
  </body>
</html>

总结

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

login.php

login.js

Ajax.php

Ajax:get和post

总结

相关文章

Ajax:`get`和`post`