Community Learn Tools Library Leisure
search
English
Home > List of blog posts > js学习：第15章 AJAX与FormData
Blogger Information
Blog 52
fans 0
comment 3
visits 42444
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
js学习：第15章 AJAX与FormData
王小飞
Original
559 people have browsed it

1.Ajax-GET

html代码：

  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.       // 1. 创建Ajax对象
  11.       var xhr = new XMLHttpRequest();
  13.       // 2. 监听请求
  14.       xhr.onreadystatechange = function () {
  15.         if (xhr.readyState === 4 && xhr.status === 200) {
  16.           console.log(xhr.responseText);
  17.         }
  18.       };
  20.       // 3. 初始化请求参数
  21.       xhr.open("GET", "test1.php", true);
  23.       // 4. 发送请求
  24.       xhr.send(null);
  25.     </script>
  26.   </body>
  27. </html>

php代码：

  1. <?php
  3. $user['name'] = 'Peter Zhu';
  4. $user['email'] = 'peter@php.cn';
  6. // 将数组转为json字符串, 不能用retrun, 必须用打印语句,如echo 
  7. echo  json_encode($user);

图片：

2.Ajax-POST

html代码：

  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.       // 1. 创建Ajax对象
  11.       var xhr = new XMLHttpRequest();
  13.       // 2. 监听请求
  14.       xhr.onreadystatechange = function () {
  15.         if (xhr.readyState === 4 && xhr.status === 200) {
  16.           console.log(xhr.responseText);
  17.         }
  18.       };
  20.       // 3. 初始化请求参数
  21.       xhr.open("POST", "test2.php", true);
  23.       // 4. 设置请求头,模拟表单类型的数组进行发送,application/x-www-form-urlencoded默认
  24.       xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
  26.       var user = {
  27.         email: "admin@php.cn",
  28.         password: "123456",
  29.       };
  31.       // 将js对象转为json
  32.       var data = JSON.stringify(user);
  34.       // 5. 发送请求
  35.       xhr.send(data);
  36.     </script>
  37.   </body>
  38. </html>

php代码：

  1. <?php
  3. // print_r($_POST);
  5. $data = key($_POST);
  6. // echo $data;
  7. // 将$data将为php可以处理的数据
  8. $user = json_decode($data);
  9. print_r($user);
  11. $user = json_decode($data, true);
  12. print_r($user);

效果1（是个对象）：

效果2：

3.Ajax-POST-2

  • 直接为json格式 需要设置utf-8

html代码：

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

php代码：

  1. <?php
  3. // print_r($_POST);
  5. $data = file_get_contents('php://input');
  6. // // echo $data;
  7. // // 将$data将为php可以处理的数据
  8. $user = json_decode($data);
  9. print_r($user);
  11. $user = json_decode($data, true);
  12. print_r($user);

效果：

4.Ajax-POST-FormData

代码：

  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-FormData</title>
  7.   </head>
  8.   <body>
  9.     <script>
  10.       // 1. 创建Ajax对象
  11.       var xhr = new XMLHttpRequest();
  13.       // 2. 监听请求
  14.       xhr.onreadystatechange = function () {
  15.         if (xhr.readyState === 4 && xhr.status === 200) {
  16.           console.log(xhr.responseText);
  17.         }
  18.       };
  20.       // 3. 初始化请求参数
  21.       xhr.open("POST", "test4.php", true);
  23.       // FormData
  24.       var data = new FormData();
  25.       data.append("name", "afgg3@qq.com");
  26.       data.append("password", "afgg3@qq.com");
  28.       // 5. 发送请求
  29.       xhr.send(data);
  30.     </script>
  31.   </body>
  32. </html>

效果：

5.Ajax-POST-FormData登录验证
html代码：

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

php代码：

  1. <?php
  3. // print_r($_POST);
  5. $pdo = new PDO('mysql:host=localhost;dbname=php', 'root', '123456');
  6. $stmt = $pdo->prepare("SELECT COUNT(`id`) FROM `users` WHERE `name`=? AND `password`=? LIMIT 1");
  7. $stmt->execute([$_POST['name'], sha1($_POST['password'])]);
  8. $user = $stmt->fetch(PDO::FETCH_NUM);
  11. if ($user[0] == 1) echo json_encode(['status'=>1, 'message'=>'验证通过']);
  12. else  echo json_encode(['status'=>0, 'message'=>'邮箱或密码错误']);

效果：一次错误一次正确：

总结：js不单单能配合html静态页面，配合php与服务器传输数据也是非常重要的，所以一定认真学习。

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：ajax实现方式有好几种, 如fetch
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
0 comments
Author's latest blog post