Community Learn Tools Library Leisure
search
English
Home > List of blog posts > Ajax常用请求类型和FormData
Blogger Information
Blog 119
fans 3
comment 1
visits 94583
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常用请求类型和FormData
赵大叔
Original
1708 people have browsed it

一、Ajax请求流程

  • 1、创建Ajax对象：var xhr = new XMLHttpRequest();
  • 2、监听请求：
  1. xhr.onreadystatechange = function () {
  2.         if (xhr.readyState === 4 && xhr.status === 200) {
  3.           console.log(xhr.responseText);
  4.         }
  • 3、初始化请求参数：xhr.open("GET", "test1.php", true);
  • 4、发送请求：xhr.send(null);

post请求方式：多一步：设置请求头,模拟表单类型的数组进行发送,application/x-www-form-urlencoded默认，还有其它类型

代码演示：

  1. <script>
  2.     // 1. 创建Ajax对象
  3.     var xhr = new XMLHttpRequest();
  5.     // 2. 监听请求
  6.     xhr.onreadystatechange = function () {
  7.         if (xhr.readyState === 4 && xhr.status === 200) {
  8.             console.log(xhr.responseText);
  9.         }
  10.     };
  12.     // 3. 初始化请求参数
  13.     xhr.open("GET", "test1.php", true);
  15.     // 4. 发送请求
  16.     xhr.send(null);
  17. </script>

二、POST请求数据的处理方式

1、模拟表单类型的数组进行发送,application/x-www-form-urlencoded，默认

代码实例演示：

  1. <script>
  2.     // 1. 创建Ajax对象
  3.     var xhr = new XMLHttpRequest();
  5.     // 2. 监听请求
  6.     xhr.onreadystatechange = function () {
  7.         if (xhr.readyState === 4 && xhr.status === 200) {
  8.             console.log(xhr.responseText);
  9.         }
  10.     };
  12.     // 3. 初始化请求参数
  13.     xhr.open("POST", "test2.php", true);
  15.     // 4. 设置请求头,模拟表单类型的数组进行发送,application/x-www-form-urlencoded默认
  16.     xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
  18.     var user = {
  19.         name: "minh",
  20.         email: "minh@texhong.con",
  21.         password: "123456",
  22.     };
  24.     // 5. 将js对象转为json
  25.     // 前后端数据传递只能是字符串
  26.     var data = JSON.stringify(user);
  28.     // 6. 发送请求
  29.     xhr.send(data);
  30. </script>

演示效果：

2、直接传递json字符串，application/json;charset=utf-8

代码实例演示：

  1. <script>
  2.     // 1. 创建Ajax对象
  3.     var xhr = new XMLHttpRequest();
  5.     // 2. 监听请求
  6.     xhr.onreadystatechange = function () {
  7.         if (xhr.readyState === 4 && xhr.status === 200) {
  8.             console.log(xhr.responseText);
  9.         }
  10.     };
  12.     // 3. 初始化请求参数
  13.     xhr.open("POST", "test3.php", true);
  15.     // 4. 设置请求头
  16.     xhr.setRequestHeader("content-type", "application/json;charset=utf-8");
  18.     var user = {
  19.         email: "admin@php.cn",
  20.         password: "123456",
  21.     };
  23.     // 将js对象转为json
  24.     var data = JSON.stringify(user);
  26.     // 5. 发送请求
  27.     xhr.send(data);
  28. </script>

演示效果：

三、FormData较传统的请求头表单数据模拟的优势

  • 快速序列化表单数据
  • FormData包装的数据可以直接被Ajax对象识别，无需设置请求头
  • 除了表单数据，FormData还兼容其它普通数据
  • 服务器上可以使用原生的$_POST来处理

代码实例演示：

  1. <script>
  2.     // 1. 创建Ajax对象
  3.     var xhr = new XMLHttpRequest();
  5.     // 2. 监听请求
  6.     xhr.onreadystatechange = function () {
  7.         if (xhr.readyState === 4 && xhr.status === 200) {
  8.             console.log(xhr.responseText);
  9.         }
  10.     };
  12.     // 3. 初始化请求参数
  13.     xhr.open("POST", "test4.php", true);
  15.     // FormData
  16.     var data = new FormData();
  17.     // 封装数据
  18.     // data.append("键", "值");
  19.     data.append("username", "admin");
  20.     data.append("password", "admin888");
  22.     // 5. 发送请求
  23.     xhr.send(data);
  24. </script>

演示效果：

四、FormData实现用户登录验证

代码实例演示：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Ajax-POST-FormData</title>
  6. </head>
  7. <style>
  8.     p { text-align: center;}
  9.     form {display: grid;gap: 15px;width: 160px;margin: auto;}
  10. </style>
  11. <body>
  12. <p>用户登录</p>
  13. <!-- onsubmit="return false": 禁用表单的默认提交,改为自定义的Ajax提交 -->
  14. <form action="" method="POST" onsubmit="return false">
  15.     <input type="text" name="name" placeholder="name" required autofocus/>
  16.     <input type="password" name="password" placeholder="******" required />
  17.     <button>提交</button>
  18. </form>
  19. <script>
  20.     // 1. 获取表单和按钮
  21.     var form = document.querySelector("form");
  22.     var btn = document.querySelector("form button");
  24.     // 2. 给按钮绑定点击事件,进行Ajax请求
  25.     btn.onclick = function () {
  26.         // 1. 创建Ajax对象
  27.         var xhr = new XMLHttpRequest();
  29.         // 2. 监听请求
  30.         xhr.onreadystatechange = function () {
  31.             if (xhr.readyState === 4 && xhr.status === 200) {
  32.                 // console.log(xhr.responseText);
  34.                 // 将jsonl转js对象
  35.                 var res = JSON.parse(xhr.responseText);
  36.                 // console.log(res.message);
  37.                 switch (res.status) {
  38.                     case 0:
  39.                     case 1:
  40.                         error = res.message;
  41.                         break;
  42.                     default:
  43.                         error = "未知错误";
  44.                 }
  45.                 // console.log(error);
  46.                 // 将提示显示到表单中
  47.                 var span = document.createElement("span");
  48.                 span.innerHTML = error;
  49.                 span.style.color = "red";
  50.                 form.appendChild(span);
  51.             }
  52.         };
  54.         // 3. 初始化请求参数
  55.         xhr.open("POST", "test5.php", true);
  57.         // FormData
  58.         var data = new FormData(form);
  59.         data.append("login_time", new Date().getTime());
  61.         // 5. 发送请求
  62.         xhr.send(data);
  63.     };
  65.     // 清除提示信息
  66.     var inputs = document.querySelectorAll("input");
  68.     for (var i = 0; i < inputs.length; i++) {
  69.         inputs[i].oninput = function () {
  70.             if (btn.nextElementSibling !== null)
  71.                 form.removeChild(btn.nextElementSibling);
  72.         };
  73.     }
  74. </script>
  75. </body>
  76. </html>

后端处理代码：

  1. <?php
  3. $pdo = new PDO('mysql:host=localhost;dbname=phpedu', 'root', 'root');
  4. $stmt = $pdo->prepare("SELECT COUNT(`id`) FROM `users` WHERE `name`=? && `password`=?");
  5. $stmt->execute([$_POST['name'], sha1($_POST['password'])]);
  6. $user = $stmt->fetch(PDO::FETCH_NUM);
  9. if ($user[0] == 1) echo json_encode(['status'=>1, 'message'=>'验证通过']);
  10. else echo json_encode(['status'=>0, 'message'=>'用户名或密码错误']);

演示效果：


总结：

1、AJAX 代表前后端异步操作。
2、AJAX 数据传递方式：GET、POST（模拟表单、Json格式、FormDta）。
3、AJAX 的基本操作感觉就是：固定的套路，背下来就好。

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
1 comments
Help 2020-05-23 09:09:51
朱老师好早啊。不看源码，自己写的话还是有困难的。
1 floor
Author's latest blog post