search

博客列表 >Ajax中POST请求、GET请求和FormData

Ajax中POST请求、GET请求和FormData

，多思曩惜，
，多思曩惜，原创
2020年06月02日 17:26:133259浏览

Ajax

1. 同步与异步

以前端请求,后端响应为例

  • 同步: 前端发请求, 必须等到后端响应完成,才允许发送另一个请求
  • 异步: 前端发请求后不等待后端响应结果继续执行,后端响应完成通过事件通知前端处理

异步最常用的处理形式就是回调函数

2. XMLHttpRequest 对象

  • XMLHttpRequest是浏览器提供的,处理异步请求的宿主对象,而非 JS 内置对象
  • 基本流程:
  1. 创建请求对象: new XMLHttpRequest()
  2. 监听请求回调: onreadystatechange
  3. 初始化请求参数: open(请求类型,请求地址,是否异步)
  4. 发送请求: send()
  • 如果是POST请求,以上步骤略有不同
  1. 创建请求对象: new XMLHttpRequest()
  2. 监听请求回调: onreadystatechange()
  3. 初始化请求参数: open(请求类型,请求地址,是否异步)
  4. 设置请求头: setRequestHeader()
  5. 准备请求参数: 可选var data = ...
  6. 发送请求: send(data)

3. GET 请求

  • 服务器: 返回 JSON
  • 前端: JSON.parse()解析 JSON 字符串
  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>Ajax -GET</title>
  7. </head>
  8. <body>
  9.     <script>
  10.         // - `XMLHttpRequest`是浏览器提供的,处理异步请求的宿主对象,而非 JS 内置对象
  11.         // - 基本流程:
  12.         // 1. 创建请求对象: `new XMLHttpRequest()`
  13.         var xhr = new XMLHttpRequest();
  14.         // 2. 监听请求回调: `onreadystatechange`
  15.         xhr.onreadystatechange =function(){
  16.             // status返回状态有200：ok，403：Forbidden，404：Not Found;
  17.             if(xhr.readyState === 4 && xhr.status === 200){
  18.                 // 响应的数据存储在responseXML中
  19.                 console.log(xhr.responseText);
  20.             }
  21.         };
  22.          // 3. 初始化请求参数: `open(请求类型,请求地址,是否异步)`
  23.         xhr.open("GET","test1.php",true);
  24.         // 4. 发送请求: `send()`
  25.         xhr.send(null);
  26.     </script>
  27. </body>
  28. </html>
  1. <?php
  2. $user['name'] = 'admin';
  3. $user['email'] = 'admin@qq.com';
  5. // 将数组转为json字符串, 不能用retrun, 必须用打印语句,如echo
  6. echo  json_encode($user);

4. POST 请求

  • 前端: 发送 JSON

  • 后端:

    • json 数据以表单数据类型发送,可$_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>Ajax-POST</title>
      7. </head>
      8. <body>
      9. <script>
      10.     // - `XMLHttpRequest`是浏览器提供的,处理异步请求的宿主对象,而非 JS 内置对象
      11.     // - 基本流程:
      12.     // 1. 创建请求对象: `new XMLHttpRequest()`
      13.     var xhr =new XMLHttpRequest();
      14.     // 2. 监听请求回调: `onreadystatechange`
      16.     xhr.onreadystatechange = function () {
      17.         if(xhr.readyState === 4 && xhr.status === 200){
      18.             console.log(xhr.responseText);
      19.         }
      20.     };
      21.     // 3. 初始化请求参数: `open(请求类型,请求地址,是否异步)`
      22.     xhr.open('POST','test2.php',true);
      23.     // 4. 设置请求头,模拟表单类型的数组进行发送,application/x-www-form-urlencoded默认
      24.     xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
      25.     var user ={
      26.         email :"admin@qq.com",
      27.         password : "admin",
      28.     };
      29.     // js对象转为JSON字符串
      30.     var date = JSON.stringify(user)
      31.     xhr.send(date);
      32. </script>
      33. </body>
      34. </html>
      1. <?php
      2. // print_r($_POST);
      3. // 转化为字符串
      4. $data = key($_POST);
      5. echo $data;
      6. // 将$data转为php可处理数据
      7. $user =json_decode($data);
      8. print_r($user);
      9. // 转为数组方式
      10. $user =json_decode($data,true);
      11. print_r($user);

    • json 数组就是以 JSON 发送, php://input 流文件方式接收
  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>Ajax-POST2</title>
  7. </head>
  8. <body>
  9.     <script>
  10.         var xhr = new XMLHttpRequest();
  11.         xhr.onreadystatechange =function(){
  12.             if(xhr.readyState === 4 && xhr.status === 200){
  13.                 console.log(xhr.responseText);
  14.             }
  15.         };
  16.         xhr.open("POST","test3.php",true);
  17.         xhr.setRequestHeader("content-type","application/json;charset=utf-8");
  18.         var user = {
  19.             email : "admin@qq.com",
  20.             password :"admin",
  21.         };
  22.         var data = JSON.stringify(user);
  23.         xhr.send(data);
  24.     </script>
  25. </body>
  26. </html>
  1. <?php
  2. // print_r($_POST);
  3. // 使用php://input来接收数据流
  4. // file_get_contents将数据流改为文件流
  5. $data= file_get_contents('php://input');
  6. $user = json_decode($data);
  7. print_r($user);
  8. $user =json_decode($data,true);
  9. print_r($user);

5. FormData

  • 可直接序列化表单数据
  • 可直接被 Ajax 识别,所以可以不设置请求头
  • 除了表单数据外,也可用于普通数据
  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.     <p>登录</p>
  10.     <form action="" method="POST" onsubmit="return false">
  12.         <input type="email" name="email" placeholder="ee@qq.com" required autofocus>
  13.         <input type="password" name="password" placeholder="****" required >
  14.         <button>提交</button>
  16.   </form>
  17.     <script>
  18.         // 获取表单和按钮
  19.         var form = document.querySelector("form");       
  20.         var btn = document.querySelector("form button");
  21.         // 点击事件,进行Ajax请求
  22.         btn.onclick = function(){
  23.             // 创建请求对象：`new XMLHttpRequest()`
  24.             var xhr = new XMLHttpRequest();
  25.             // 2. 监听请求回调: `onreadystatechange`
  26.             xhr.onreadystatechange =function(){
  27.                 if(xhr.readyState === 4 && xhr.status === 200){
  28.                     console.log(xhr.responseText);
  29.                     // 将解析后端数据并保存在对象res
  30.                     var res=JSON.parse(xhr.responseText);
  31.                     console.log(res);
  32.                     // 从后端获取status值
  33.                     switch(res.status){
  34.                         case 0:
  35.                             error = res.message;
  36.                             break;
  37.                         case 1:
  38.                             error = res.message;                            
  39.                             break;
  40.                         default:
  41.                         error = "未知错误";
  42.                     }
  43.                     var span = document.createElement('span');
  44.                     span.innerHTML=error;
  45.                     span.style.color="red";
  46.                     form.appendChild(span);
  47.                 };
  48.             };
  49.              // 3. 初始化请求参数: `open(请求类型,请求地址,是否异步)`
  50.             xhr.open("POST","test4.php",true);
  51.             // 传入表单数据
  52.             var data =new FormData(form);
  53.             // 在数据中加入时间戳
  54.             data.append("login_time",new Date().getTime());
  55.             // 4. 发送请求: `send()`
  56.             xhr.send(data);
  57.         };
  58.     // 清除提示信息
  59.         var input =document.querySelectorAll('input');
  60.         for (var i = 0 ;i <input.length;i++){
  61.             input[i].oninput =function(){
  62.                 if(btn.nextElementSibling !== null)
  63.                 form.removeChild(btn.nextElementSibling);
  64.             };
  65.         }
  66.     </script>
  67. </body>
  68. </html>
  1. <?php
  2. // print_r($_POST);
  4. // 链接数据库
  5. $pdo = new PDO('mysql:host=localhost;dbname=phpedu', 'root', 'root');
  6. $stmt = $pdo->prepare("SELECT COUNT(`id`) FROM `users` WHERE `email`=? AND `password`=? LIMIT 1");
  7. $stmt->execute([$_POST['email'], $_POST['password']]);
  8. $user = $stmt->fetch(PDO::FETCH_NUM);
  9. // print_r($user);
  10. // 判断数据，并向前端发送
  11. if($user[0] == 1 ) echo json_encode(['status'=>1,'message'=>'验证通过']);
  12. else echo json_encode(['status'=>0,'message'=>'验证不通过']);

总结

  • Ajax请求的步骤：1、创建请求对象，2、监听请求回调，3、初始化请求参数，4、发送请求。
  • 使用JSON.parse()解析JSON字符串
上一条：PHP基础：MVC利用服务容器统一管理外部对象下一条：layui框架基础及form表单元素使用方法
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多