JavaScript，如何使用FormData模拟/打包一个表单数据？

我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

本文描述一个非常规的表单应用方式FormData，常规的form都是利用action来提交数据的。那么，本文中使用FormData来打包表单数据，进而可以使用ajax等技术来提交数据。FormData可以从普通的form来生成，也可以无表单实物直接通过js操作获得。

苏南大叔的程序如此灵动博客，记录苏南大叔和计算机代码的故事。测试环境：谷歌浏览器。

从已有表单初始化

这里就准备一个常见的表单，作为本文的标的物。

<form onsubmit="javascript:return check(this)">
    用户名<input type="text" id="a1" name="username" value="用户名"><br />
    密 码<input type="text" id="a2" name="password" value="密码"><br />
    技 能<input type="checkbox" id="a3" name="skill[]" value="nodejs" checked="checked">nodejs<br />
         <input type="checkbox" id="a4" name="skill[]" value="php" checked="checked">php<br />
    简 介<textarea id="a5" name="brief">文字描述带换行</textarea>
    <input type="submit" value="Submit!">
</form>

所有的输入元素都需要有name属性，否则无法访问到值。这些输入项的name就是FormData的key值。

function check(obj) {
    //var data = new FormData(document.forms[0]);
    var data = new FormData(obj);
    data.forEach((value, name) => {
        console.log(name,value);
    });
    return false;
}

js直接模拟表单

new FormData(obj)传入一个表单对象obj，就可以直接获得这个表单内的所有的带name的输入项。如果没有传入obj的话，就是空的FormData对象。
可以通过.set()，.append()来管理FormData内的元素。当然，还有很多其他的方法对元素进行操作。但是，这并不是本文关心的内容。

var data = new FormData();
data.set("username", "用户名");
data.set("skill[]", "nodejs");
data.append("skill[]","php");
data.forEach((value, name) => {
    console.log(name,value);
});

其实，在FormData内，并不关心input的type，只关心name和value。而对于复选框checkbox，是允许存在同名数据的。所以，可以使用.append()来模拟这种情况。

ajax提交表单【待测】

实际测试结果显示：这里的代码发送给php后端的时候，是可以正常使用的。但是，发给python或者nodejs的后端，或多或少都有一些问题，主要的症结在于发送数据时的contentType。如果有需要，可以在着重在这个角度进行调试。

这里使用传统的XMLHttpRequest来模拟这个表单提交。

var xhr = new XMLHttpRequest();
xhr.open("post", "formdata.php");
xhr.send(data);
xhr.onload = function () {
    if (xhr.status == 200) {
        console.log(xhr.responseText)
    }
}

当然，也可以使用jquery来提交数据。

$.ajax({
    async: true,
    url: "formdata.php",
    type: "POST",
    processData: false,
    contentType: false,
    data: data,
    timeout: 60000, //毫秒
    success: function(json) {
        console.log(json);
    },
    error: function(json) {
        console.log(json);
    }
});

php接收表单

为了查看提交的数据效果，这里使用php作为后端处理逻辑代码做测试。

echo json_encode($_POST,JSON_UNESCAPED_UNICODE);

参考文字：
https://newsn.net/say/php-json.html

结束语

更多JavaScript文章，请点击苏南大叔的博客：

• https://newsn.net/tag/js/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。