search

博客列表 >Ajax请求与FormData

Ajax请求与FormData

phpcn_u202398
phpcn_u202398原创
2020年05月25日 15:18:00916浏览

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的知识，本知识都是以前不知道。通过以后的学习用于综合实践。

上一条：thinkphp结合layui做分页下一条：跨域请求的原理（CORS/JSONP）
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多