form表单的序列化

一、form表单数据的序列化

//将form中的数据封装成Object对象
var getData=function($form){
		var o = {};
		var a = $form.serializeArray();
		$.each(a, function() {
			if (o[this.name] !== undefined) {
				if (!o[this.name].push) {
					o[this.name] = [ o[this.name] ]
				}
				o[this.name].push(this.value || '')
			} else {
				o[this.name] = this.value || ''
			}
		});
		return o;
	}

2.对于有上传文件的form表单，使用new FormData($('#formId')[0])序列化表单

          $.ajax({
		        url:url,
		        type: 'POST',
		        cache: false,
		        data: new FormData($('#formId')[0]),//序列化form表单,可以包含文件上传的form表单
		        processData: false,
		        contentType: false,
		        dataType:"json",
		        beforeSend: function(){
		            uploading = true;
		        },
		        success : function(data) {
		         //提交成功或者失败的相应处理
		        }
		    });

 

3、对于无上传文件的form表单，可以使用new FormData($('#formId')[0])序列化表单，也可以使用serialize序列化表单，此处使用serialize序列化表单

 $.ajax({
		        url:url,
		        type: 'POST',
		        cache: false,
		        data: $("#formId").serialize(),//序列化form表单
		        processData: false,
		        contentType: false,
		        dataType:"json",
		        beforeSend: function(){
		            uploading = true;
		        },
		        success : function(data) {
		         //提交成功或者失败的相应处理
		        }
		    });


//使用这种方式提交遇到一个问题，后台一直拿不到提交的数据，不知道什么原因，是不是这个提交方式有问题，但是改成下面的提交方式就可以拿到提交的数据

var formData=$("#formId").serialize();//序列化form表单
$.post(url,formData,function(data){
    //提交成功或者失败的相应处理
});

4、还可以使用serializeArray序列化表单

 

 

5、$("formId").serialize()和 new FormData($('#formId')[0])的区别与联系：

$("formId").serialize()和 new FormData($('#formId')[0])都是序列化表单，实现表单的异步提交，但是二者有区别

（1）$("formId").serialize()只能序列化表单中的数据 ，比如文本框等input  select等的数据，不支持文件二进制流提交，也就是说不支持上传文件；

（2）new FormData($('#formId')[0])支持表单中文件二进制流形式提交，也就是支持上传文件，而且new FormData($('#formId')[0])不仅仅可以序列化文件，一样可以用作表单数据的序列化，也就是说FormData($('#formId')[0])包含了$("formId").serialize()的功能；

另外new FormData($('#formId')[0])可能对于jquery的版本有要求，，$("formId").serialize()时Jquery的方法