Community Learn Tools Library Leisure
search
English
Home > List of blog posts > ajax 表单的无刷新上传
Blogger Information
Blog 64
fans 6
comment 2
visits 83015
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 表单的无刷新上传
王娇
Original
597 people have browsed it

学习总结

  • ajax可以实现表单无刷新上传，有较好的用户体验
  • ajax有两种上传方式，GET和POST,GET方式上传时，发送数据为空，POST方式时，发送数据为json字符串

1.登录界面无刷新上传

1.1首页 index.html

  2. <!DOCTYPE html>
  3. <html lang="en">
  4.   <head>
  5.     <meta charset="UTF-8" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.     <link rel="stylesheet" href="css/index.css" />
  9.     <script src="js/login.js"></script>
  10.   </head>
  11.   <body>
  12.     <div class="login">
  13.       <div class="title">
  14.         <span>会员登录</span><span>(手机号码或者邮箱登录)</span>
  15.       </div>
  16.       <form action="" method="POST" onsubmit="return false">
  17.         <input
  18.           type="text"
  19.           name="userName"
  20.           id="userName"
  21.           placeholder="example@163.com"
  22.           required
  23.         />
  24.         <input
  25.           type="password"
  26.           name="passWord"
  27.           id="passWord"
  28.           placeholder="****"
  29.           required
  30.         />
  31.         <div>
  32.           <input
  33.             type="text"
  34.             name="captcha"
  35.             id="captcha"
  36.             placeholder="请输入验证码"
  37.             require
  38.           />
  39.           <img src="" onclick="reFresh()" />
  40.           <input
  41.             type="hidden"
  42.             name="relCaptcha"
  43.             id="relCaptcha"
  44.             class="relCaptcha"
  45.             value=""
  46.           />
  47.         </div>
  48.         <div class="button" onclick="checkLogin()">登录</div>
  49.         <div id="showInfo"></div>
  50.       </form>
  51.     </div>
  52.   </body>
  53.   <script>
  54.     reFresh();
  55.   </script>
  56. </html>

1.2表单ajax处理login.js

  2. //------------------------
  3. //登录无刷新验证
  4. //---------------------------
  5. function checkLogin() {
  6.   //获取form表单
  7.   var form = document.querySelector("form");
  9.   //创建ajax对象
  10.   var xml = new XMLHttpRequest();
  12.   //临听ajax异步对象
  13.   xml.onreadystatechange = function () {
  14.     if (xml.readyState == 4 && xml.status == 200) {
  15.       var loginSta = JSON.parse(xml.responseText);
  16.       var status = loginSta.status;
  17.       var message = loginSta.message;
  18.       console.log(status, message);
  19.       document.getElementById("showInfo").innerText = message;
  20.       if (status) {
  21.         document.getElementById("showInfo").style.color = "green";
  22.       } else {
  23.         document.getElementById("showInfo").style.color = "red";
  24.       }
  25.     }
  26.   };
  28.   //初始化ajax对象
  29.   xml.open("POST", "login.php", true);
  31.   var data = new FormData(form);
  32.   //发送数据
  33.   xml.send(data);
  34. }
  36. //------------------------------
  37. //验证码无刷新显示
  38. //---------------------------------
  39. function reFresh() {
  40.   //创建ajax对象
  41.   var xml = new XMLHttpRequest();
  43.   //临听ajax异步对象
  44.   xml.onreadystatechange = function () {
  45.     if (xml.readyState == 4 && xml.status == 200) {
  46.       var data = JSON.parse(xml.responseText);
  47.       var captcha = data.captcha;
  48.       var relcapt = data.relcapt;
  50.       document.querySelector("img").src = captcha;
  51.       document.getElementById("relCaptcha").value = relcapt;
  52.     }
  53.   };
  55.   //初始化ajax对象
  56.   xml.open("GET", "captcha.php", true);
  58.   //发送数据
  59.   xml.send(null);
  60. }

1.3显示验证码captcha.php

  2. <?php
  3. namespace login;
  4.  require_once 'vendor/autoload.php';//自动加载外部组件库
  6.  use Gregwar\Captcha\CaptchaBuilder;//使用验证码的外部组件
  8.  $builder = new CaptchaBuilder(4);//新建一个4位的验证码对象
  10.  $builder->build();//生成一个4位验证码
  12.  $captcha = $builder->inline();//生成一个图片文件，可以在img的src属性中使用
  14.  $relcapt = strtolower($builder->getPhrase());//得到真实的4位验证码字符
  16.  echo json_encode(['captcha'=>$captcha,'relcapt'=>$relcapt]);
  17.  ?>

1.4处理登录验证 login.php

  2. <?php
  3. namespace login;
  5. session_start();
  7. require 'compotents/conn/DBconn.php';
  8. $user = new DBconn();
  10. $table = 'tb_user';
  11. $loginState = [];
  13. if($_SERVER['REQUEST_METHOD']==='POST'):
  14.     $captcha = trim(strtolower($_POST['captcha']));
  15.     $relcapt = $_POST['relCaptcha'];
  16.     //判断验证码是否正确
  17.     if($captcha === $relcapt):
  18.         $name = trim($_POST['userName']);
  19.         $pwd = md5(trim($_POST['passWord']));
  20.         $where = "`name`='$name'";
  21.         $res = $user->select($table,'*',$where);
  22.         //判断是否存在用户名
  23.         if(count($res)):
  24.             $where = "`password`='$pwd'";
  25.             $res = $user->select($table,'*',$where);
  26.             //判断密码是否正确
  27.             if(count($res)):
  28.                 $nc = $res[0]['nc'];
  29.                 $img = $res[0]['headimg'];
  30.                 $_SESSION['userHeadImg'] = $img;//用户头像的文件名写入session
  31.                 $_SESSION['userNc'] = $nc;//用户昵称写入session
  32.                 $loginState['status']=1;
  33.                 $loginState['message']='登录成功';
  34.             else:
  35.                 $loginState['status'] = 0;
  36.                 $loginState['message']='密码错误';
  37.             endif;
  39.         else:
  40.             $loginState['status'] = 0;
  41.             $loginState['message']='用户名不存在';
  42.         endif;
  43.     else:
  44.         $loginState['status'] = 0;
  45.         $loginState['message']='验证码错误';
  46.     endif;
  47. else:
  48.     $loginState['status'] = 0;
  49.     $loginState['message']='请求类型错误';
  50. endif;
  52. echo json_encode($loginState);
  54. ?>

1.5 显示效果图

  • 登录成功

  • 验证码错误

2 设置请求头

2.1模拟form表单设置请求头ajaxPostOne.html

  2. <!DOCTYPE html>
  3. <html lang="en">
  4.   <head>
  5.     <meta charset="UTF-8" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>ajax中的POST请求</title>
  8.     <script>
  9.       function addContent() {
  10.         var content = document.getElementById('content').value;
  11.         //创建一个ajax对象
  12.         var ajaxObj = new XMLHttpRequest;
  13.         //监听ajax对象
  14.         ajaxObj.onreadystatechange = function(){
  15.             if((ajaxObj.readyState==4)&&(ajaxObj.status==200))
  16.             { 
  17.                 //接收服务传回的json数据并解析
  18.                 jsObj = JSON.parse(ajaxObj.responseText);
  19.                 sendPerson = jsObj.person;
  20.                 sendContent = jsObj.content;
  21.                 sendDate = jsObj.date;
  23.                 document.getElementById('sendPerson').innerText=sendPerson;
  24.                 document.getElementById('showContent').innerText=sendContent;
  25.                 document.getElementById('sendDate').innerText=sendDate;
  26.             }
  27.         };
  29.         //初始化
  30.         ajaxObj.open('POST','ajaxPostOne.php',true);
  31.          //设置请求头,模拟表单类型的数组进行发送,application/x-www-form-urlencoded默认
  32.         ajaxObj.setRequestHeader('content-type','application/x-www-form-urlencoded');
  33.        //发送
  34.        //将发送的内容包装成一个对象
  35.         var sContent = {
  36.           SContent:content
  37.         };
  38.         //把发送内容序列化为一个json字符串然后发送
  39.         ajaxObj.send(JSON.stringify(sContent));
  40.       }
  41.     </script>
  42.     <style>
  43.         body{
  44.             display: grid;
  45.             gap: 5px;
  46.         }
  47.         p{
  48.             background-color: lightseagreen;
  49.             border-radius: 10px;
  50.             padding: 10px;
  51.         }
  52.     </style>
  53.   </head>
  54.   <body>
  55.     <h1>使用ajax-模拟表单-实现无刷新操作</h1>
  56.     <textarea name="content" id="content" cols="30" rows="10" placeholder="输入评论内容"></textarea>
  57.     <button type="button" onclick="addContent()">添加</button>
  58.     <div>
  59.         <span>发送人:</span><span id="sendPerson"></span>
  60.         <p id="showContent" style="height: 100px;"></p>
  61.         <span>发送日期:</span><span id="sendDate"></span>
  62.     </div>
  63.     </form>
  64.   </body>
  65. </html>

2.2处理数据ajaxPostOne.php

  2. <?php
  3. $add['person'] = 'angle';
  4. $add['date'] = date('Y-m-d');
  6. //获取ajax传输过来的数据
  7. $jsonContent = json_decode((key($_POST)),true);//将客户端传来的json数据转换为一个数组
  8. $add['content'] =str_replace('出售','****',$jsonContent['SContent']);
  10. //把add数组序列化为一个json字符串
  11. $jsonPDC = json_encode($add);
  13. //把json字符串返回给ajax对象
  14. echo $jsonPDC;
  17. ?>

2.3模拟json数据设置请求头ajaxPostTwo.html

  2. <!DOCTYPE html>
  3. <html lang="en">
  4.   <head>
  5.     <meta charset="UTF-8" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>ajax中的POST请求</title>
  8.     <script>
  9.       function addContent() {
  10.         var content = document.getElementById('content').value;
  11.         //创建一个ajax对象
  12.         var ajaxObj = new XMLHttpRequest;
  13.         //监听ajax对象
  14.         ajaxObj.onreadystatechange = function(){
  15.             if((ajaxObj.readyState==4)&&(ajaxObj.status==200))
  16.             { 
  17.                 //接收服务传回的json数据并解析
  18.                 jsObj = JSON.parse(ajaxObj.responseText);
  19.                 sendPerson = jsObj.person;
  20.                 sendContent = jsObj.content;
  21.                 sendDate = jsObj.date;
  23.                 document.getElementById('sendPerson').innerText=sendPerson;
  24.                 document.getElementById('showContent').innerText=sendContent;
  25.                 document.getElementById('sendDate').innerText=sendDate;
  26.             }
  27.         };
  29.         //初始化
  30.         ajaxObj.open('POST','ajaxPostTwo.php',true);
  31.          //设置请求头,模拟表单类型的数组进行发送,application/json;charset=utf-8为json格式传输
  32.         ajaxObj.setRequestHeader('content-type','application/json;charset=utf-8');
  33.        //发送
  34.        //将发送的内容包装成一个对象
  35.         var sContent = {
  36.           SContent:content
  37.         };
  38.         //把发送内容序列化为一个json字符串然后发送
  39.         ajaxObj.send(JSON.stringify(sContent));
  40.       }
  41.     </script>
  42.     <style>
  43.         body{
  44.             display: grid;
  45.             gap: 5px;
  46.         }
  47.         p{
  48.             background-color: lightseagreen;
  49.             border-radius: 10px;
  50.             padding: 10px;
  51.         }
  52.     </style>
  53.   </head>
  54.   <body>
  55.     <h1>使用ajax-JSON实现无刷新操作</h1>
  56.     <textarea name="content" id="content" cols="30" rows="10" placeholder="输入评论内容"></textarea>
  57.     <button type="button" onclick="addContent()">添加</button>
  58.     <div>
  59.         <span>发送人:</span><span id="sendPerson"></span>
  60.         <p id="showContent" style="height: 100px;"></p>
  61.         <span>发送日期:</span><span id="sendDate"></span>
  62.     </div>
  63.     </form>
  64.   </body>
  65. </html>

2.4处理数据ajaxPostTwo.php

  2. <?php
  3. $add['person'] = 'angle';
  4. $add['date'] = date('Y-m-d');
  6. //获取ajax传输过来的数据
  7. $data = file_get_contents('php://input');
  8. $jsonContent = json_decode($data,true);//将客户端传来的json数据转换为一个数组
  9. $add['content'] =str_replace('出售','****',$jsonContent['SContent']);
  11. //把add数组序列化为一个json字符串
  12. $jsonPDC = json_encode($add);
  14. //把json字符串返回给ajax对象
  15. echo $jsonPDC;
  18. ?>

代码显示效果

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：这个案例写得完美,看来是掌握了, 恭喜
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