Community Learn Tools Library Leisure
search
English
Home > List of blog posts > Ajax请求与FormData
Blogger Information
Blog 36
fans 0
comment 0
visits 28199
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
phpcn_u202398
Original
914 people have browsed it

1、Ajax请求

1.1、GET请求

代码示例

前端代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <title></title>
  5.         <meta charset="UTF-8">
  6.         <meta name="viewport" content="width=device-width, initial-scale=1">
  8.     </head>
  9.     <body>
  10.         <script>
  11.             //创建ajax对象
  12.             var xhr = new XMLHttpRequest();
  13.             //监听请求
  14.             xhr.onreadystatechange = function(){
  16.                 if(xhr.readyState === 4 && xhr.status === 200){
  17.                     console.log(xhr.responseText);
  18.                 }
  19.             };
  21.             xhr.open("GET","get.php",true);            
  22.             xhr.send(null);
  23.         </script>
  24.     </body>
  25. </html>

后端数据

  1. <?php
  3.   $user['name'] = "zcx";
  4.   $user['pwd'] = "123456";
  6.   echo json_encode($user);
  7. ?>

1.2、POST请求

application/x-www-form-urlencoded方法代码示例

前端代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <title></title>
  5.         <meta charset="UTF-8">
  6.         <meta name="viewport" content="width=device-width, initial-scale=1">
  8.     </head>
  9.     <body>
  10.         <script>
  11.             //创建ajax对象
  12.             var xhr = new XMLHttpRequest();
  13.             //监听请求
  14.             xhr.onreadystatechange = function(){
  15.                 if(xhr.readyState === 4 && xhr.status === 200){
  16.                     console.log(xhr.responseText);
  17.                 }
  18.             };         
  19.              xhr.open("POST","post.php",true);
  21.              xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
  23.             var user={
  24.                 name:"zcx",
  25.                 pwd:"123456",
  26.             };
  27.             var data = JSON.stringify(user);
  28.             xhr.send(data);
  29.         </script>
  30.     </body>
  31. </html>

后端代码

  1. <?php
  3. $user = key($_POST);
  4. echo $user;
  6. $data = json_decode($user);
  7. print_r($data);
  8. $data = json_decode($user,true);
  9. print_r($data);
  10. ?>
application/x-www-form-urlencoded方法代码示例

前端代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <title></title>
  5.         <meta charset="UTF-8">
  6.         <meta name="viewport" content="width=device-width, initial-scale=1">
  8.     </head>
  9.     <body>
  10.         <script>
  11.             //创建ajax对象
  12.             var xhr = new XMLHttpRequest();
  13.             //监听请求
  14.             xhr.onreadystatechange = function(){
  16.                 if(xhr.readyState === 4 && xhr.status === 200){
  17.                     console.log(xhr.responseText);
  18.                 }
  19.             };          
  21.              xhr.open("POST","post1.php",true);
  23.              xhr.setRequestHeader('Content-type','application/json;charset=utf-8');
  25.             var user={
  26.                 name:"zcx",
  27.                 pwd:"123456",
  28.             };
  29.              var data = JSON.stringify(user);
  31.             xhr.send(data);
  32.         </script>
  33.     </body>
  34. </html>

后端代码

  1. <?php
  3. $user = file_get_contents('php://input');
  4. echo $user;
  6. $data = json_decode($user);
  7. print_r($data);
  8. $data = json_decode($user,true);
  9. print_r($data);

1.3、FormData

代码示例

前端代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <title></title>
  5.         <meta charset="UTF-8">
  6.         <meta name="viewport" content="width=device-width, initial-scale=1">
  7.         <link href="" rel="stylesheet">
  9.     </head>
  10.     <body>
  11.         <script>
  12.             //创建ajax对象
  13.             var xhr = new XMLHttpRequest();
  14.             //监听请求
  15.             xhr.onreadystatechange = function(){
  17.                 if(xhr.readyState === 4 && xhr.status === 200){
  18.                     console.log(xhr.responseText);
  19.                 }
  20.             };          
  22.             xhr.open("POST","post2.php",true);
  24.             var data = new FormData();
  25.             data.append("name",'zcx')
  26.             data.append("pwd",'123456')
  27.             xhr.send(data);
  28.         </script>
  29.     </body>
  30. </html>

后端代码

  1. <?php
  3. $user['name'] = $_POST['name'];
  4. $user['pwd'] = $_POST['pwd'];
  6. print_r($user);

2、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>Document</title>
  7.     <style>
  8.         body{
  9.             box-sizing: border-box;
  10.             margin: 0px;
  11.             padding: 0px;
  12.         }
  13.         form{
  14.             width: 260px;
  15.             margin: auto;
  16.             margin-top: 50px;
  17.             background-color: #a7c4e0;
  18.             padding: 30px  30px;
  20.             display: grid;  
  21.             gap: 20px;         
  22.         }
  23.     </style>
  24. </head>
  25. <body>
  26.     <form action="" method="POST" onsubmit="return false">
  27.             <div>
  28.                 <label>用户名：</label>
  29.                 <input type="text" name="name" placeholder="请输入用户名" autofocus required >
  30.             </div>
  31.             <div>
  32.                 <label>密    码：</label>
  33.                 <input type="password" name="pwd" placeholder="请输入用户名"  required>
  34.             </div>
  35.             <div style="margin:auto;">
  36.                 <button>登  录</button>
  37.             </div>            
  38.     </form>
  39. </body>
  40. </html>
  41. <script>
  42.     var form = document.querySelector("form");
  43.     var btn = document.querySelector("form button");
  45.     btn.onclick = function(){
  46.         //创建ajax对象
  47.         var xhr = new XMLHttpRequest();
  48.         //监听请求
  49.         xhr.onreadystatechange = function(){
  50.             if(xhr.readyState === 4 && xhr.status === 200){
  51.                 var res = JSON.parse(xhr.responseText);
  52.                 switch(res.status){
  53.                     case 0:
  54.                             error = res.message;
  55.                             break;
  56.                     case 1:
  57.                             error = res.message;
  58.                             break;
  59.                     default:
  60.                             error="未知错误";
  61.             }          
  62.                 var span = document.createElement("span");
  63.                 span.innerHTML = error;
  64.                 span.style.color ="red";
  65.                 form.appendChild(span);
  66.             }
  67.         };         
  69.         xhr.open("POST","index.php",true);
  71.         var data = new FormData(form);
  73.         xhr.send(data);
  74.     };
  76.     var inputs = document.querySelectorAll("input");
  78.      for(var i = 0;i < inputs.length; i++){
  79.          inputs[i].oninput = function(){
  80.              if(btn.nextElementSibling !== null)  form.removeChild(btn.nextElementSibling)             
  81.          };
  82.      }
  84. </script>

后端代码

  1. <?php
  3. $pdo = new PDO("mysql:host=localhost;dbname=xxyl","root","root");
  4. $sql = "select count(`id`) from `users` where `name`=? and `pwd`=? limit 1";
  5. $stmt = $pdo->prepare($sql);
  6. $stmt->execute([$_POST['name'],md5($_POST['pwd'])]);
  7. $res = $stmt->fetch(PDO::FETCH_NUM);
  9. if($res[0]== 1){
  10.      echo json_encode(['status'=>0,'message'=>'验证成功']);
  11. }else{
  12.     echo json_encode(['status'=>1,'message'=>'用户名或密码错误']);
  13. }

" class="reference-link">

学习总结

本节课我们学习了Ajax与FormData的知识，通过本节课的学习对POST提交数据的方式有了新的认识，学到了FormData的知识，本知识都是以前不知道。通过以后的学习用于综合实践。

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：看来你是有点基础的, 不知formdata, 应该是看得书少了, 以后还会不断有新知识点, 但更多新知识 , 你还是要看手册的
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