使用Ajax-Json-POST请求，做一个数据表进行用户信息验证-js-38课8.12 - 前端

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

首页 > 博客列表 > 使用Ajax-Json-POST请求，做一个数据表进行用户信息验证-js-38课8.12

博主信息

博文 59

粉丝 6

访问量 67461

专题推荐

更多>

1.创建简单的表单

2.获取表单和按钮

3.给按钮绑定事件

判断邮箱或密码是否正确，给出不同的提示

4.创建demo7.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ajax-json-formdata用户信息验证</title>
  </head>
  <body>
    <p>请登录:</p>
    <form
      action=""
      method="POST"
      style="display: grid; gap: 15px;"
      onsubmit="return false"
    >
      <input
        type="email"
        name="email"
        placeholder="exam@email.com"
        required
        autofocus
      />
      <input type="password" name="password" placeholder="******" required />
      <button>提交</button>
    </form>
    <script>
      // 1. 获取表单和按钮
      var form = document.querySelector("form");
      var btn = document.querySelector("form button");
      // 2. 给按钮绑定事件
      btn.onclick = function () {
        // 1. 创建ajax对象
        var xhr = new XMLHttpRequest();
        // 2. 监听请求
        xhr.onreadystatechange = function () {
          if (xhr.readyState === 4 && xhr.status === 200) {
            // console.log(xhr.responseText);
            var res = JSON.parse(xhr.responseText);
            console.log(res);
            // 根据后端返回的状态进行判断
            switch (res.status) {
              case 0:
              case 1:
                error = res.message;
                break;
              default:
                error = "未知错误";
            }
            // 将error信息渲染到页面中
            var span = document.createElement("span");
            span.innerHTML = error;
            form.appendChild(span);
          }
        };
        // 3. 初始化请求参数
        xhr.open("POST", "test5.php");
        // 4. 使用FormData来组织数据,最终仍是以表单数据方式发送
        var data = new FormData(form);
        // data.append("email", form.email.value);
        // data.append("passowrd", form.password.value);
        // 5. 发送请求, 发送到服务器上的是json格式字符串
        xhr.send(data);
      };
    </script>
  </body>
</html>

5.创建test5.php

<?php
// print_r($_POST);
$users = [
    ['id'=>1,'email'=>'melinda@php.cn', 'password'=>'123'],
    ['id'=>2,'email'=>'micki@qq.com', 'password'=>'123'],
];
$status = 0; $message = '<span style="color:red">邮箱或密码错误</span>';
// $status = 0; $message = '邮箱或密码错误';
foreach ($users as $user) {
    if ($user['email'] == $_POST['email'] && $user['password'] ==  $_POST['password']) {
        $status = 1;
        $message = '<span style="color:green">验证通过</span>';
        // $message = '验证通过';
    }  
}
echo json_encode(['status'=>$status, 'message'=> $message]);

总结POST请求流程：
创建ajax对象: new XMLHttpRequest()
监听请求: onreadystatechange
初始化请求参数: open()
使用FormData来组织数据
发送json格式字符串到服务器上: send()

批改老师：