使用FormData对form表单序列化

一、FormData作用

1. 将form表单元素的name与value进行组合，实现表单数据的序列化
2. 异步上传二进制文件

二、创建formData对象

<!-- 创建普通的html表单 -->
<form id="form">
		<input type="text" name="username">
		<input type="password" name="password">
		<!-- type 设置为button，不会触发form 提交 -->
		<input type="button" id="btn" value="提交">
</form>

	
	<script type="text/javascript">
		// 获取按钮
		var btn = document.getElementById('btn');
		// 获取表单 必须为原生的dom元素
		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>

三、formData对象操作方法

1. get(‘key’) 获取表单对象属性的值

2. set(‘key’, ‘value’) 设置表单对象属性的值

3. delete(‘key’) 删除表单对象属性中的值

4. append(key,value)在数据末尾追加数据

5. getAll(‘user’)获取取key为user的所有值 [‘a’,‘b’]

<!-- 创建普通的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);
			
	      //获取username的value值
	formData.get('username');
	        //设置username的value值为tom
	formData.set('username','tom');
	console.log(formData.get('username'))// tom
	        //删除 
	formData.delete('password');
	console.log(formData.get('password'))// null
	        //在数据末尾追加
	formData.append('sex','女');
	console.log(formData.get('sex'));//‘女’
	
	        // set('sex','女') 有则修改，没有则添加
	        //append('sex','女') 不管是否存在，都会末尾追加
	formData.append('sex','男');
	
	        //获取所有属性值
	 console.log(formData.getAll('sex')) //  ['女','男']        
</script>