序列化表单数据 html,jQuery序列化form表单数据为JSON对象的实现方法

jQuery序列化form表单数据为JSON对象的实现方法

发布时间：2020-09-24 21:55:06

来源：脚本之家

阅读：228

作者：haishu

jquery提供的serialize方法能够实现。

$("#searchForm").serialize();

但是，观察输出的信息，发现serialize()方法做的是将表单中的数据以htpp请求格式拼接成字符串。

serialize确实是能够解决一般的提交数据。但是有时我们需要的是一个object对象，而不是字符串(比如jqgrid reload时设置查询条件参数，就需要object对象)。

方法如下：

(function(window, $) {

$.fn.serializeJson = function() {

var serializeObj = {};

var array = this.serializeArray();

var str = this.serialize();

$(array).each(

function() {

if (serializeObj[this.name]) {

if ($.isArray(serializeObj[this.name])) {

serializeObj[this.name].push(this.value);

} else {

serializeObj[this.name] = [

serializeObj[this.name], this.value ];

}

} else {

serializeObj[this.name] = this.value;

}

});

return serializeObj;

};

})(window, jQuery);

调用：

console.info($("#searchForm").serializeJson());

下面通过一段代码看下jQuery序列化表单为JSON对象

姓名:
性别:	男 女
年龄:	20 21 22
爱好	篮球 排球 足球 地球

$(function() {

$("#ajaxBtn").click(function() {

var params = $("#myform").serializeObject(); //将表单序列化为JSON对象

console.info(params);

})

})

$.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;

}

上述serializeObject方法是将form序列化为JSON对象

总结

以上所述是小编给大家介绍的jQuery序列化form表单数据为JSON对象的实现方法 ，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对亿速云网站的支持！