ajax 表单的无刷新上传 - 作业

微信公众号讲师中心

首页

文章

web3.0 后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端 JavaScript 后端开发数据库移动端运维开发 UI设计计算机基础 XML Web Services

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

学习总结

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

1.登录界面无刷新上传

1.1首页 index.html


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css" />
    <script src="js/login.js"></script>
  </head>
  <body>
    <div class="login">
      <div class="title">
        <span>会员登录</span><span>(手机号码或者邮箱登录)</span>
      </div>
      <form action="" method="POST" onsubmit="return false">
        <input
          type="text"
          name="userName"
          id="userName"
          placeholder="example@163.com"
          required
        />
        <input
          type="password"
          name="passWord"
          id="passWord"
          placeholder="****"
          required
        />
        <div>
          <input
            type="text"
            name="captcha"
            id="captcha"
            placeholder="请输入验证码"
            require
          />
          <img src="" onclick="reFresh()" />
          <input
            type="hidden"
            name="relCaptcha"
            id="relCaptcha"
            class="relCaptcha"
            value=""
          />
        </div>
        <div class="button" onclick="checkLogin()">登录</div>
        <div id="showInfo"></div>
      </form>
    </div>
  </body>
  <script>
    reFresh();
  </script>
</html>


//------------------------
//登录无刷新验证
//---------------------------
function checkLogin() {
  //获取form表单
  var form = document.querySelector("form");
  //创建ajax对象
  var xml = new XMLHttpRequest();
  //临听ajax异步对象
  xml.onreadystatechange = function () {
    if (xml.readyState == 4 && xml.status == 200) {
      var loginSta = JSON.parse(xml.responseText);
      var status = loginSta.status;
      var message = loginSta.message;
      console.log(status, message);
      document.getElementById("showInfo").innerText = message;
      if (status) {
        document.getElementById("showInfo").style.color = "green";
      } else {
        document.getElementById("showInfo").style.color = "red";
      }
    }
  };
  //初始化ajax对象
  xml.open("POST", "login.php", true);
  var data = new FormData(form);
  //发送数据
  xml.send(data);
}
//------------------------------
//验证码无刷新显示
//---------------------------------
function reFresh() {
  //创建ajax对象
  var xml = new XMLHttpRequest();
  //临听ajax异步对象
  xml.onreadystatechange = function () {
    if (xml.readyState == 4 && xml.status == 200) {
      var data = JSON.parse(xml.responseText);
      var captcha = data.captcha;
      var relcapt = data.relcapt;
      document.querySelector("img").src = captcha;
      document.getElementById("relCaptcha").value = relcapt;
    }
  };
  //初始化ajax对象
  xml.open("GET", "captcha.php", true);
  //发送数据
  xml.send(null);
}

1.3显示验证码captcha.php


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


<?php
namespace login;
session_start();
require 'compotents/conn/DBconn.php';
$user = new DBconn();
$table = 'tb_user';
$loginState = [];
if($_SERVER['REQUEST_METHOD']==='POST'):
    $captcha = trim(strtolower($_POST['captcha']));
    $relcapt = $_POST['relCaptcha'];
    //判断验证码是否正确
    if($captcha === $relcapt):
        $name = trim($_POST['userName']);
        $pwd = md5(trim($_POST['passWord']));
        $where = "`name`='$name'";
        $res = $user->select($table,'*',$where);
        //判断是否存在用户名
        if(count($res)):
            $where = "`password`='$pwd'";
            $res = $user->select($table,'*',$where);
            //判断密码是否正确
            if(count($res)):
                $nc = $res[0]['nc'];
                $img = $res[0]['headimg'];
                $_SESSION['userHeadImg'] = $img;//用户头像的文件名写入session
                $_SESSION['userNc'] = $nc;//用户昵称写入session
                $loginState['status']=1;
                $loginState['message']='登录成功';
            else:
                $loginState['status'] = 0;
                $loginState['message']='密码错误';
            endif;
        else:
            $loginState['status'] = 0;
            $loginState['message']='用户名不存在';
        endif;
    else:
        $loginState['status'] = 0;
        $loginState['message']='验证码错误';
    endif;
else:
    $loginState['status'] = 0;
    $loginState['message']='请求类型错误';
endif;
echo json_encode($loginState);
?>

1.5 显示效果图

登录成功
验证码错误

2 设置请求头

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


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ajax中的POST请求</title>
    <script>
      function addContent() {
        var content = document.getElementById('content').value;
        //创建一个ajax对象
        var ajaxObj = new XMLHttpRequest;
        //监听ajax对象
        ajaxObj.onreadystatechange = function(){
            if((ajaxObj.readyState==4)&&(ajaxObj.status==200))
            { 
                //接收服务传回的json数据并解析
                jsObj = JSON.parse(ajaxObj.responseText);
                sendPerson = jsObj.person;
                sendContent = jsObj.content;
                sendDate = jsObj.date;
                document.getElementById('sendPerson').innerText=sendPerson;
                document.getElementById('showContent').innerText=sendContent;
                document.getElementById('sendDate').innerText=sendDate;
            }
        };
        //初始化
        ajaxObj.open('POST','ajaxPostOne.php',true);
         //设置请求头,模拟表单类型的数组进行发送,application/x-www-form-urlencoded默认
        ajaxObj.setRequestHeader('content-type','application/x-www-form-urlencoded');
       //发送
       //将发送的内容包装成一个对象
        var sContent = {
          SContent:content
        };
        //把发送内容序列化为一个json字符串然后发送
        ajaxObj.send(JSON.stringify(sContent));
      }
    </script>
    <style>
        body{
            display: grid;
            gap: 5px;
        }
        p{
            background-color: lightseagreen;
            border-radius: 10px;
            padding: 10px;
        }
    </style>
  </head>
  <body>
    <h1>使用ajax-模拟表单-实现无刷新操作</h1>
    <textarea name="content" id="content" cols="30" rows="10" placeholder="输入评论内容"></textarea>
    <button type="button" onclick="addContent()">添加</button>
    <div>
        <span>发送人:</span><span id="sendPerson"></span>
        <p id="showContent" style="height: 100px;"></p>
        <span>发送日期:</span><span id="sendDate"></span>
    </div>
    </form>
  </body>
</html>

2.2处理数据ajaxPostOne.php


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

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


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ajax中的POST请求</title>
    <script>
      function addContent() {
        var content = document.getElementById('content').value;
        //创建一个ajax对象
        var ajaxObj = new XMLHttpRequest;
        //监听ajax对象
        ajaxObj.onreadystatechange = function(){
            if((ajaxObj.readyState==4)&&(ajaxObj.status==200))
            { 
                //接收服务传回的json数据并解析
                jsObj = JSON.parse(ajaxObj.responseText);
                sendPerson = jsObj.person;
                sendContent = jsObj.content;
                sendDate = jsObj.date;
                document.getElementById('sendPerson').innerText=sendPerson;
                document.getElementById('showContent').innerText=sendContent;
                document.getElementById('sendDate').innerText=sendDate;
            }
        };
        //初始化
        ajaxObj.open('POST','ajaxPostTwo.php',true);
         //设置请求头,模拟表单类型的数组进行发送,application/json;charset=utf-8为json格式传输
        ajaxObj.setRequestHeader('content-type','application/json;charset=utf-8');
       //发送
       //将发送的内容包装成一个对象
        var sContent = {
          SContent:content
        };
        //把发送内容序列化为一个json字符串然后发送
        ajaxObj.send(JSON.stringify(sContent));
      }
    </script>
    <style>
        body{
            display: grid;
            gap: 5px;
        }
        p{
            background-color: lightseagreen;
            border-radius: 10px;
            padding: 10px;
        }
    </style>
  </head>
  <body>
    <h1>使用ajax-JSON实现无刷新操作</h1>
    <textarea name="content" id="content" cols="30" rows="10" placeholder="输入评论内容"></textarea>
    <button type="button" onclick="addContent()">添加</button>
    <div>
        <span>发送人:</span><span id="sendPerson"></span>
        <p id="showContent" style="height: 100px;"></p>
        <span>发送日期:</span><span id="sendDate"></span>
    </div>
    </form>
  </body>
</html>

2.4处理数据ajaxPostTwo.php


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