表单提交数据与FormData

表单提交数据

一般情况下，我们表单提交数据是使用表单submit按钮进行提交

<form action="demo.php" method="post">
        <input type="text" name="username" placeholder="请输入用户名" id="username">
        <input type="password" name="password" placeholder="请输入密码" id="pwd">
        <input type="text" name="email" placeholder="请输入邮箱" id="email">
        <input type="text" name="phone" placeholder="请输入手机号码" id="phone">
        <input type="submit" value="提交">
    </form>

在后端我们使用PHP模拟

<?php
header("Content-Type:text/html;charsert=utf-8");
$_POST["username"];
$_POST["password"];
$_POST["email"];
$_POST["phone"];
echo $_POST["username"].$_POST["password"].$_POST["email"].$_POST["phone"];

在html页面中输入如下内容点击提交按钮后


会在php页面打印php得到的内容。这种方法是比较基础的数据提交的方式。但是其缺点就是会跳转页面，当我们点击提交后页面就会跳转到php页面，此方法对表单的依赖也比较强。因此，在学习了ajax之后就可以用ajax发送请求提交数据。

ajax提交数据

 <form action="">
        <input type="text" name="username" placeholder="请输入用户名" id="username">
        <input type="password" name="password" placeholder="请输入密码" id="pwd">
        <input type="text" name="email" placeholder="请输入邮箱" id="email">
        <input type="text" name="phone" placeholder="请输入手机号码" id="phone">
        <input type="button" value="提交" id="btn">
    </form>

$("#btn").click(function() {
        $.post({
            url: "demo.php",
            dataType: "json",
            data: {
                username: $("#username").val(),
                password: $("#pwd").val(),
                email: $("#email").val(),
                phone: $("#phone").val()
            },
            success: function(obj) {
                console.log(obj);
            }

        })
    })

<?php
header("Content-Type:text/html;charset=utf-8");
echo json_encode($_POST["username"].$_POST["password"].$_POST["email"].$_POST["phone"]);

当我点击提交按钮后使用ajaz请求发送数据，数据在控制台打印

并且页面还在html页面中，使用ajax不会跳转页面，并且还可以人为的控制提交数据的时机。这是在传递非文件类型数据的时候的处理方式，那么在传递文件类型的数据又如何处理呢。

ajax传递文件

是否还是向之前传递数据一样呢，我们来试一下

<form action="">
        <input type="text" name="username" placeholder="请输入用户名" id="username">
        <input type="password" name="password" placeholder="请输入密码" id="pwd">
        <input type="text" name="email" placeholder="请输入邮箱" id="email">
        <input type="text" name="phone" placeholder="请输入手机号码" id="phone">
        <input type="file" name="file" id="file">
        <input type="button" value="提交" id="btn">
    </form>

<?php
header("Content-Type:text/html;charset=utf-8");
echo json_encode($_FILES("file").$_POST["username"].$_POST["password"].$_POST["email"].$_POST["phone"]);

$("#btn").click(function() {
        $.post({
            url: "demo.php",
            dataType: "json",
            data: {
                username: $("#username").val(),
                password: $("#pwd").val(),
                email: $("#email").val(),
                phone: $("#phone").val(),
                file: $("#file").val()
            },
            success: function(obj) {
                console.log(obj);
            }

        })
    })

然而当我们点击提交按钮后

并没有结果，因此，这种方法不行。
那么，什么方法行呢。我们可以使用FormData对象来传递数据。

FromData

FormData提供了一种表示表单数据的键值对 key/value 的构造方式，也就是说，它可以帮我们将表单数据用键值对来表示，不需要我们自己手动传递。接下来，我们来试一下。

$("#btn").click(function() {
        var fm = new FormData($("form")[0]);
        $.post({
            url: "demo.php",
            dataType: "json",
            data: fm,
            processData: false,
            contentType: false,
            success: function(obj) {
                console.log(obj);
            }

        })
    })

当我们点击提交按钮之后，我们可以看到控制台的输出，是可以看到file的，那么FormData的这种方式就可以解决ajax传递文件的问题，同时也为我们传递其他数据提供了一种更方便的方法。

由此我们便总结一下，formdata的使用流程

1. 创建一个FormData的实例对象

 var fm = new FormData($("form")[0]);

构造函数的参数是一个DOM对象并且form元素。
2. 将实例对象对象作为数据传递过去
3. 要设置procsssData和contentType为false，这样jQuery就不会再额外添加请求头和拼接数据了。
以上是jQuery的步骤，那么原声js又是什么情况呢
代码如下

 document.getElementById("btn").onclick = function() {
            var xhr = new XMLHttpRequest();
            xhr.open("post", "demo.php");
            var form = document.getElementsByTagName("form")[0];
            var fm = new FormData(form);
            xhr.send(fm);
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    console.log(xhr.responseText);
                }
            }
        }

效果如下

由此可见，FormData的确是一种很方便的提交数据的一种方法，但是我们也发现了，以上都是提交的form内的表单控件的数据，那么如果我们想提交非表单控件的值的时候怎么办呢。接下来就需要介绍一个FormData的一个实例方法，该方法可以让我们提交表单控件的值以外的值。

append

append，就是我们要介绍的FormData的实例方法。从字面我们就可以知道该方法是用来追加数据的，那么怎么样呢。

var fm  =new FormData(document.getElemjentsByTagName("form")[0]);
fm.append("key","value");

既然FormData是一种键值对的构造方式，那么很明显数据是通过键值对的形式传递的。
该方法的参数有两个
参数1：属性名，也就是要提交的数据的名称
参数2：属性值，就是具体的值
接下来，我们试一下

 document.getElementById("btn").onclick = function() {
            var xhr = new XMLHttpRequest();
            xhr.open("post", "demo.php");
            var form = document.getElementsByTagName("form")[0];
            var fm = new FormData(form);
            fm.append("addr", "湖北省");
            xhr.send(fm);
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    console.log(xhr.responseText);
                }
            }
        }

表单序列化

除了上面的方法外，jQuery的表单序列化也可以帮我们更方面的提交数据。表单序列化就是将表单中弄得数据拼接成键值对形式的字符串，也就是试用ajax发送数据传入的参数字符串形式。

$("#btn").click(function() {
        console.log($("form").serialize());
    })

效果如下，这就是表单序列化之后的格式，可以直接作为数据提交，比较方便。

由此可见，我们的数据的确是提交过去了，以上便是提交数据的方法。