FormData的详细介绍及使用请点击此处，那里对FormData的方法和事件已经表述的非常清楚，

FormData对象可以让我们组织一个使用XMLHttpRequest对象发送的键值对的集合。它主要用于发送表单数据,但是可以独立于使用表单传输的数据。

本文主要记录FormData对象的使用以及异步提交说明。

一、创建一个FormData对象

你可以创建一个你自己的FormData对象，然后通过append() 方法向对象中添加键值对，就像下面这样：

    var formData = new FormData();

    formData.append("username", "Groucho");
    formData.append("accountnum", 123456); 

    formData.append("webmasterfile", blob);

    var request = new XMLHttpRequest();
    request.open("POST", "http://localhost/index.php");
    request.send(formData);

或者可以直接利用FormData对象直接提交一维数组到服务端，例如：

        // 实例化FormData对象，并将表单对象作为参数传入
        var fd = new FormData(fm);
        
        // 发送ajax请求，同时将表单的全部数据发送给后端
        var xhr = new XMLHttpRequest();

        //使用了formdata就必须使用post发送请求
        xhr.open('post', 'http://localhost/index.php');

        //调用send方法发送请求时，必须将fd作为参数传入
        xhr.send(fd);

二、实战演练Demo

    // Html
    <form id="main" method="POST">
        <div>用户名: <input type="text" name="name" autocomplete="off"> <span></span></div>
        <div>密　码: <input type="password" name="pwd" autocomplete="off"> <span></span></div>
        <div>邮　箱: <input type="email" name="email" autocomplete="off"><span></span></div>
        <div>年　龄: <input type="text" name="age" autocomplete="off"> <span></span></div>
        <div><input id="btn" type="submit" value="注册"></div>
    </form>


    // Javascript
    <script type="text/javascript">

        //判断浏览器中是否有 XMLHttpRequest 对象
        function getXhr() {
            var xmlhttp;
            if (window.XMLHttpRequest) {
                //如果有，说明是非IE浏览器 （chrome、Firefox、opera等，包括IE 7+）
                xmlhttp = new XMLHttpRequest();
            } else {
                //如果没有，说明是IE 7 -
                xmlhttp = new ActiveXObject('Msxml2.XMLHTTP');
            }
            return xmlhttp;
        }

        // 表单验证--姓名
        function checkName() {
            var tempName = this.value.trim(),
                errorTip = document.getElementsByName('name')[0].nextElementSibling,
                nameReg = /^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,20}$/;
            if (tempName.length > 2 && nameReg.test(tempName)) {
                errorTip.innerHTML = "";
                return;
            }
            errorTip.innerHTML = "请输入合法姓名";
        }

        // 表单验证--密码
        function checkPwd() {
            var tempName = this.value.trim(),
                errorTip = document.getElementsByName('pwd')[0].nextElementSibling;
            if (tempName.length > 6) {
                errorTip.innerHTML = "";
                return;
            }
            errorTip.innerHTML = "密码长度不能低于6位数";
        }

        // 表单提交--邮箱
        function checkEmail() {
            var tempName = this.value.trim(),
                errorTip = document.getElementsByName('email')[0].nextElementSibling,
                emailReg = /^[a-zA-Z0-9._%-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
            if (emailReg.test(tempName)) {
                errorTip.innerHTML = "";
                return;
            }
            errorTip.innerHTML = "请输入正确的邮箱地址";
        }

        // 表单提交--年龄
        function checkAge() {
            var tempName = this.value.trim(),
                errorTip = document.getElementsByName('age')[0].nextElementSibling,
                ageReg = /^[0-9]{1,2}$/;
            if (ageReg.test(tempName)) {
                errorTip.innerHTML = "";
                return;
            }
            errorTip.innerHTML = "请输入合法年龄";
        }

        window.onload = function () {
            document.getElementsByName('name')[0].onblur = checkName;
            document.getElementsByName('name')[0].onkeypress = checkName;

            document.getElementsByName('pwd')[0].onblur = checkPwd;
            document.getElementsByName('pwd')[0].onkeypress = checkPwd;

            document.getElementsByName('email')[0].onblur = checkEmail;
            document.getElementsByName('email')[0].onkeypress = checkEmail;

            document.getElementsByName('age')[0].onblur = checkAge;
            document.getElementsByName('age')[0].onkeypress = checkAge;
        }


        // 提交表单
        var SubmitBth = document.getElementById('btn');
        SubmitBth.onclick = function () {
            // 先获取表单的DOM对象
            var fm = document.getElementById('main'),
                inputs = fm.getElementsByTagName('input'),
                spans = fm.getElementsByTagName('span');

            // 验证表单是否为空 空值不允许提交
            for (var i = 0, len = inputs.length; i < len; i++) {
                inputs[i].index = i;
                if (inputs[i].value == '' || inputs[i].value == null) {
                    alert('内容不能为空');
                    return false;
                }
            }

            for (var j = 0, len = spans.length; j < len; j++) {
                if (spans[j].innerHTML != "") {
                    alert("提交失败 ：" + spans[j].innerHTML);
                    return false;
                }
            }

            // 实例化FormData对象，并将表单对象作为参数传入
            var fd = new FormData(fm);

            // 发送ajax请求，同时将表单的全部数据发送给后端
            var xhr = getXhr();

            //使用了formdata就必须使用post发送请求
            xhr.open('post', 'http://localhost/index.php');

            //调用send方法发送请求时，必须将fd作为参数传入
            xhr.send(fd);

            // 监听是否提交成功及返回值
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    console.log(xhr.responseText);
                    if (xhr.responseText == 1) {
                        alert('提交成功');
                    } else {
                        alert('提交失败')
                    }
                }
            }
        }
    </script>
文章目录