form表单经常用到 serialize与new FormData

form表单ajax提交我们经常用到 serialize与new FormData
serialize（）和new FormDate（）
javascript序列化表单的方法，所谓序列化表单就是讲form表单中所有name属性序列化成KEY-VALUE的形式，提交到后台，后台以对象相应的字段接收。

区别

1，new FormDate（）支持表单中文件二进制流形式提交，也就是支持上传文件，serialize（）不支持文件二进制流提交。

2， seriaLize()是jquery方法

formData

document.querySelector("#sub").onclick = function() {
	var xhr = new XMLHttpRequest();
	xhr.open("post", 'fromData.php');
	// 如果是jq就可以使用表单序列化方法
	// 现在在XMLHttpRequest2.0 我们可以使用formData来收集表单数据
	// 获取表单
	var myform = document.querySelector("#form1");
	// 将表单作为参数传递,再创建formData对象
	var formdata = new FromData(myform);
	// 特点 可以自由的追加参数
	formdata.append("address", "什么");
	xhr.send(fromdata);
	xhr.onreadystatechange = function() {
		if(xhr.status == 200 && xhr.readyState == 4) {
			console.log(xhr.responseText);
		}
	}
}

serialize

// 1.serialize()这个方法是jq的方式，所以需要使用jq对象来调用
// 2.这个方法可以将表单中所有name属性的表单元素的值收集，生成 key=value&key=value...这种格式
// 3.在ajax中，支持两种格式的参数(1.对象 2.参数格式字符串)
var data = $("#ajaxForm").serialize();
$.ajax({
    type:'post',
    url:'./server/register.php',
    data:data,
    timeout:3000,
    dataType:'json',
    beforeSend:function(){
        // 用户输入的合法性验证
        // 如果验证通过。开启节流阀。避免用户反复提交
        $('.submit').addClass("disabled").val('正在注册中');

注意

如果form表单中不含文件二进制形式尽量使用serialize（）方法，避免一些浏览器不兼容的解码错误。遇到过一次IE浏览器死活不兼容在不包含文件的form表单使用new
formdata序列化的事情，最后换serialize（）解决了问题

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_2546