Jquery序列化form表单对象

在web开发过程中，难免需要提交表单，js提交表单数据需要将所有input控件的值全部获得，然后组合成一个JSONObject对象传入后台，难免有些麻烦和琐碎，有好几种方法可以获得全部的表单数据，今天介绍其中一种序列化serialize()方式；

• serialize()

$("#myForm").seroalize()# myFrom 为form标签的id；

把id为myForm的form标签内所有的控件全部序列化成json字符串；如：

key1=value1&key2=value2key：是控件的name属性值

• serializeArr()

$("#myForm").seroalizeArr()# myFrom 为form标签的id；

把id为myForm的form标签内所有的控件全部序列化成json字符串并添加到一个数组；如：

[ ???{key1:value1}, ???{key2:value2}]key：是控件的name属性值

• serializeObject()

$("#myForm").seroalizeArr()# myFrom 为form标签的id；

把id为myForm的form标签内所有的控件全部序列化成JSONObject；如：

{ ???key1:value1, ???key2:value2}key：是控件的name属性值

但是jquery没有内置serializeObject()方法，需要对重写该方法

$.fn.serializeObject = function () { ???var o = {}; ???var a = this.serializeArray(); ???$.each(a, function () { ???????if (o[this.name]) { ???????????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;};

但是在ajax请求时，使用该方法获得的对象直接传入后台会有400错误，这时候需要添加headers、和contentType；同时需要对获得对象转化成字符串类型；

var formData = $("#myForm").serializeObject();console.log(formData);$.ajax({ ???url: product.url.insert(), ???type: "POST", ???headers: { ???????Accept: "text/html, application/xhtml+xml, */*" ???}, ???contentType: ‘application/json;charset=utf-8‘, ???data: JSON.stringify(formData), ???async: false, ???dataType: ‘JSON‘, ???success: function (res) { ???} ???error:function(){ ???}

如果 控件name 值和javaBean字段值相同，那么后台可以直接接受该对象参数，不需要每个字段写一个参数，使用@RequesBody注解修饰；

public String test(@RequesBody User user)

Jquery序列化form表单对象

原文地址：https://www.cnblogs.com/LiuSandy/p/9853578.html