ajax无刷新表单信息提交_纯ajax无表单提交-CSDN博客

本文链接：https://blog.csdn.net/dancheng1/article/details/77414080

1. 收集表单信息

利用新技术FormData表单数据对象可以实现快速收集表单信息。

FormData是html5的新技术，在主流浏览器都可以正常使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.onload = function () {
            var fm = document.getElementsByTagName('form')[0];
            fm.onsubmit = function () {
                //利用formData快速收集表单
                var fd = new FormData(fm);

                var xhr = new XMLHttpRequest();
                xhr.onreadystatechange = function () {
                    if(xhr.readyState == 4){
                        alert(xhr.responseText);
                    }
                }
                xhr.open('post', './04.php');
                xhr.send(fd);
                return false; //阻止提交
            }
        }
    </script>
    <style type="text/css">

    </style>
</head>
<body>
    <h2>ajax + javascript + form 实现无刷新表单信息提交</h2>
    <form method="post" action="">
        <p>用户名：<input type="text" name="username" id="username" /></p>
        <p>密码：<input type="password" name="password" id="password" /></p>
        <p>邮箱：<input type="text" name="email" id="email" /></p>
        <p><input type="submit" value="注册" /></p>
    </form>
</body>
</html>

效果图：

2、ajax实现文件上传

服务器端：$_FILES接收附件信息(name/error/size/type/tmp_name)

move_uploaded_file(临时附件，真实附件路径名);

$_FILES 中的error字段意思

0->ok

1->大小超过php.ini限制

2->大小超过MAX_FILE_SIZE

3->附件只上传了一部分（不完整）

4->没有上传附件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.onload = function () {
            var fm = document.getElementsByTagName('form')[0];
            fm.onsubmit = function () {
                //利用formData快速收集表单
                var fd = new FormData(fm);

                var xhr = new XMLHttpRequest();
                xhr.onreadystatechange = function () {
                    if(xhr.readyState == 4){
                        alert(xhr.responseText);
                    }
                }
                xhr.open('post', './05.php');
                xhr.send(fd);
                return false; //阻止提交
            }
        }
    </script>
    <style type="text/css">

    </style>
</head>
<body>
    <h2>ajax + javascript + formData 实现无刷新文件上传</h2>
    <form method="post" action="">
        <p>用户名：<input type="text" name="username" id="username" /></p>
        <p>密码：<input type="password" name="password" id="password" /></p>
        <p>邮箱：<input type="text" name="email" /></p>
        <p>头像：<input type="file" name="img" /></p>
        <p><input type="submit" value="注册" /></p>
    </form>
</body>
</html>

<?php
if($_FILES['img']['error'] > 0){
    exit('上传附件有问题，有可能没有附件');
}
$path = "./upload/";
$name = $_FILES['img']['name'];
//附件上传逻辑
if(move_uploaded_file($_FILES['img']['tmp_name'], $path.$name)){
    echo 'success';
} else {
    echo 'fail';
}

效果图：

2.1 使用FormData注意：

① 每个表单域必须有name属性

② 在form标签里边无需设置enctype=”multipart/form-data”属性(即时有上传域)

③ ajax传递FormData的数据不需要设置setRequestHeader()函数

3. 上传大附件进度条设置

接收php代码

<?php
if($_FILES['img']['error'] > 0){
    exit('上传附件有问题，有可能没有附件');
}
$name = $_FILES['img']['name'];
$name = iconv('UTF-8', 'GB2312', $name);
$path = "./upload/";

//附件上传逻辑
if(move_uploaded_file($_FILES['img']['tmp_name'], $path.$name)){
    echo 'success';
} else {
    echo 'fail';
}

显示代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.onload = function () {
            var fm = document.getElementsByTagName('form')[0];
            fm.onsubmit = function () {
                //利用formData快速收集表单
                var fd = new FormData(fm);

                var xhr = new XMLHttpRequest();
                xhr.onreadystatechange = function () {
                    if(xhr.readyState == 4){
                        alert(xhr.responseText);
                    }
                }
                
                //设置监听事件
                xhr.upload.onprogress = function (evt) {
                    var loaded = evt.loaded;
                    var total = evt.total;
                    var per = Math.floor((loaded/total)*100)+"%";
                    document.getElementById('son').innerHTML = per;
                    document.getElementById('son').style.width = per;
                } 
                
                xhr.open('post', './06.php');
                xhr.send(fd);
                return false; //阻止提交
            }
        }
    </script>
    <style type="text/css">
        #pat {
            width: 430px;
            height: 40px;
            border:5px solid blue;
        }
        #son {
            width: 0%;
            height: 100%;
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <h2>ajax + javascript + formData 实现无刷新文件上传</h2>
    <form method="post" action="">
        <p>用户名：<input type="text" name="username" id="username" /></p>
        <p>密码：<input type="password" name="password" id="password" /></p>
        <p>邮箱：<input type="text" name="email" /></p>
        <div id="pat"><div id="son"></div></div>
        <p>头像：<input type="file" name="img" /></p>
        <p><input type="submit" value="注册" /></p>
    </form>
</body>
</html>

效果图：