search

博客列表 >js学习：第15章 AJAX与FormData

js学习：第15章 AJAX与FormData

王小飞
王小飞原创
2020年05月22日 18:17:31557浏览

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与服务器传输数据也是非常重要的，所以一定认真学习。

上一条：常用的字符串函数--php中文网线上班0422下一条：JS - Ajax基础与实战
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多