ajax学习笔记（三关于FormData对象）

最新推荐文章于 2024-11-07 01:22:08 发布

夏灿y

最新推荐文章于 2024-11-07 01:22:08 发布

阅读量229

点赞数

分类专栏： Ajax 文章标签： ajax

本文链接：https://blog.csdn.net/xia_zai_ya/article/details/105392835

版权

Ajax 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

当我们使用ajax传递的参数值较多时，参数的值的获取以及拼接都很麻烦，这时我们就可以使用 formdata对象，可以方便我们的操做，更为重要的是我们可以传递二级制的文件了，比如图片，这在普通的方法里是办不到的。
作用总结二点：
在这里插入图片描述
formdata对象使用方法：
1.准备HTML表单。

这里我们要给一个id名，因为我们后面要获取到这个表单。

2.将HTML表单转化为 formdata对象
在这里插入图片描述
我们创建一个新的formdata对象并将表单传入进去，会自动帮我们把表单转化为请求参数所需要的格式。

3.提交表单对象。
在这里插入图片描述
注意：

nodejs中formidable模块的使用方法不做介绍。
具体实例代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<!-- 创建普通的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');
		// 为按钮添加点击事件
		btn.onclick = function () {
			// 将普通的html表单转换为表单对象
			var formData = new FormData(form);
			// 创建ajax对象
			var xhr = new XMLHttpRequest();
			// 对ajax对象进行配置
			xhr.open('post', 'http://localhost:3000/formData');
			// 发送ajax请求
			xhr.send(formData);
			// 监听xhr对象下面的onload事件
			xhr.onload = function () {
				// 对象http状态码进行判断
				if (xhr.status == 200) {
					console.log(xhr.responseText);
				}
			}
		}
	</script>
</body>
</html>

服务器端代码：

app.post('/formData', (req, res) => {
	// 创建formidable表单解析对象
	const form = new formidable.IncomingForm();
	// 解析客户端传递过来的FormData对象
	form.parse(req, (err, fields, files) => {
		res.send(fields);
	});
});

这里我们将fields响应回客户端，这个参数里面就是保持了表单的普通请求参数，当然，第三个参数里面保存的就是表单中的二进制参数。

formdata 对象的实例方法
这些方法是对表单中数据的操作，因为点击提交后不会立刻将数据传给服务器端，会先进行校验。

1.获取表单对象中属性的值。
在这里插入图片描述
传入的值就是表单中input的name名

2.设置表单对象中属性的值
在这里插入图片描述
第一个参数就是表单中input的name名，第二个是要修改的值内容。
注意：如果表单中没有这一项，那么会自动创建这一项。

3.删除表单对象中属性的值
在这里插入图片描述
4.向表单对象中追加属性值。

这里说一下 set方法和 append方法的区别：

formdata 二进制文件上传
在这里插入图片描述
这里我们用监听一个用户选择文件时的onchange事件，在里面我们要先创建一个空的formdata对象用来存储用户选着文件，然后在使用formdata下面的append方法向表单中追加数据，用户存储的文件在files属性中，这个属性是一个集合。
服务器端代码：

// 实现文件上传的路由
app.post('/upload', (req, res) => {
	// 创建formidable表单解析对象
	const form = new formidable.IncomingForm();
	// 设置客户端上传文件的存储路径
	form.uploadDir = path.join(__dirname, 'public', 'uploads');
	// 保留上传文件的后缀名字
	form.keepExtensions = true;
	// 解析客户端传递过来的FormData对象
	form.parse(req, (err, fields, files) => {
		// 将客户端传递过来的文件地址响应到客户端
		res.send({
			path: files.attrName.path.split('public')[1]
		});
	});
});