$.post把表单对象传递过去_FormData对象

因为最后要放到send方法中，所以只能用于POST请求

作用：

把html表单信息映射成一个对象，把此对象传递到服务器端，省略了表单控件的获取，表单值的获取，参数格式的拼接。
异步上传二进制文件，图片，视频。

使用步骤：

1.创建普通的html表单，写好name属性

<form id="form">
    <input type="text" name="username">
    <input type="password" name="password">
    <input type="button" id="btn" value="提交">
</form>

2.将html表单转为FormData对象

var form = document.getElementById('form');
var formData = new FormData(form);

3.提交表单对象

xhr.send(formData);

4.用第三方模块formidable解析传入的对象

const formidable = require('formidable');
app.post('/formData', (req, res) => {
    const form = new formidable.IncomingForm();
    form.parse(req, (err, fields, files) => {
        res.send(fields);
    });
});

示例：

05.html

<!-- 创建普通的html表单 -->
<form id="form">
	<input type="text" name="username">
	<input type="password" name="password">
	<input type="button" id="btn" value="提交">
</form>
<script type="text/javascript">
	var btn = document.getElementById('btn');
	var form = document.getElementById('form'); // 1
	btn.onclick = function () {
		var formData = new FormData(form); // 1
		var xhr = new XMLHttpRequest();
		xhr.open('post', 'http://localhost:3000/formData');
		xhr.send(formData); // 1
		xhr.onload = function () {
			if (xhr.status == 200) {
				console.log(xhr.responseText);
			}
		}
	}
</script>

app.js

const formidable = require('formidable');
app.post('/formData', (req, res) => {
    const form = new formidable.IncomingForm();
    form.parse(req, (err, fields, files) => {
        res.send(fields);
    });
});

网址输入：localhost:3000/05.html

原文链接：https://blog.csdn.net/weixin_32025789/article/details/112144166