Ajax:表单处理 Serialize 和 FormData

1.Serialize

将表单内容拼接成字符串类型的参数 name=张三&age=10 这种形式

 <form id="form">
		<input type="text" name="username">
		<input type="password" name="password">
		<input type="submit" value="提交">
	</form>
	
	//js代码:

		$('#form').on('submit', function () {
			// 将表单内容拼接成字符串类型的参数
			 var params = $('#form').serialize();
			 console.log(params)  
			//阻止提交
			return false;
		});

2.FormData

1.自动将表单对象中的数据拼接成请求参数的格式
2.异步传输二进制文件(解决了ajax不能传输文件的弊端)

<!-- 创建普通的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>
©️2020 CSDN 皮肤主题: 游动-白 设计师:上身试试 返回首页