search

博客列表 >ajax 表单的无刷新上传

ajax 表单的无刷新上传

王娇
王娇原创
2020年05月23日 22:03:03602浏览

学习总结

  • 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. ?>

代码显示效果

上一条：跨域请求实战下一条：JS：JS的数据类型与JSON
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多