search

博客列表 >Ajax常用请求类型和FormData

Ajax常用请求类型和FormData

赵大叔
赵大叔原创
2020年05月22日 16:41:581707浏览

一、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 的基本操作感觉就是：固定的套路，背下来就好。

上一条：JavaScript基本控制流程，对象数组/数组遍历方式下一条：JSON数组与对象方法、JS序列化
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议
Help2020-05-23 09:09:511楼
朱老师好早啊。不看源码，自己写的话还是有困难的。

相关文章

查看更多