ajax无刷新表单信息提交

前端之家收集整理的这篇文章主要介绍了ajax无刷新表单信息提交前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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实现文件上传

<form enctype=”multipart/form-data”>

<input type=”file”>

服务器端:$_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>
效果图:

原文链接:https://www.f2er.com/ajax/160848.html

猜你在找的Ajax相关文章