如何将表单的所有元素转换为JavaScript对象？
我希望有某种方法从表单自动构建JavaScript对象，而不必遍历每个元素。我不希望使用$（'#formid'）.serialize（）；返回的字符串；，我也不希望$（'#formid'）.serializeArray（）返回映射；
当前回答
此线程似乎已成为表单序列化的常见问题解答：）
我对PHP命名的看法：<input name=“user[name]”>
$('form').on('submit', function(ev) {
ev.preventDefault();
var obj = $(this).serializePHPObject();
// $.post('./', obj);
});
(function ($) {
// based on https://stackoverflow.com/a/25239999/1644202
// <input name="user[name]" >
$.fn.serializePHPObject = function () {
var obj = {};
$.each(this.serializeArray(), function (i, pair) {
var cObj = obj,
pObj,
cpName;
$.each(pair.name.split("["), function (i, pName) {
pName = pName.replace("]", "");
pObj = cObj;
cpName = pName;
cObj = cObj[pName] ? cObj[pName] : (cObj[pName] = {});
});
pObj[cpName] = pair.value;
});
return obj;
};
})(jQuery);
其他回答
由于XSS攻击和可能存在的其他问题，我不会在现场网站上使用此功能，但下面是一个快速示例：
$("#myform").submit(function(){
var arr = $(this).serializeArray();
var json = "";
jQuery.each(arr, function(){
jQuery.each(this, function(i, val){
if (i=="name") {
json += '"' + val + '":';
} else if (i=="value") {
json += '"' + val.replace(/"/g, '\\"') + '",';
}
});
});
json = "{" + json.substring(0, json.length - 1) + "}";
// do something with json
return false;
});
function serializedArray2Object(array){
let obj = {};
array.forEach(function(item){
if(obj[item['name']] === undefined){
obj[item['name']] = item['value'];
}else if(Array.isArray(obj[item['name']])){
obj[item['name']] = [...obj[item['name']],item['value']]
}else{
obj[item['name']] = [obj[item['name']],item['value']];
}
});
return obj;
}
使用
serializedArray2Object($('#form').serializeArray())
我刚刚从jQuery中发现了这个函数，并编写了一个到对象的转换器，这样数组就变成了一个对象。
要获得快速、现代的解决方案，请使用JSONify jQuery插件。下面的示例是从GitHub README中逐字摘录的。这一切都归功于插件作者Kushal Pandya。
鉴于：
<form id="myform">
<label>Name:</label>
<input type="text" name="name"/>
<label>Email</label>
<input type="text" name="email"/>
<label>Password</label>
<input type="password" name="password"/>
</form>
正在运行：
$('#myform').jsonify();
生产：
{"name":"Joe User","email":"joe@example.com","password":"mypass"}
如果要使用此JSON对象执行jQuery POST：
$('#mybutton').click(function() {
$.post('/api/user', JSON.stringify($('#myform').jsonify()));
}
如果要发送带有JSON的表单，则必须在发送字符串时删除[]。您可以使用jQuery函数serializeObject（）实现这一点：
var frm = $(document.myform);
var data = JSON.stringify(frm.serializeObject());
$.fn.serializeObject = function() {
var o = {};
//var a = this.serializeArray();
$(this).find('input[type="hidden"], input[type="text"], input[type="password"], input[type="checkbox"]:checked, input[type="radio"]:checked, select').each(function() {
if ($(this).attr('type') == 'hidden') { //If checkbox is checked do not take the hidden field
var $parent = $(this).parent();
var $chb = $parent.find('input[type="checkbox"][name="' + this.name.replace(/\[/g, '\[').replace(/\]/g, '\]') + '"]');
if ($chb != null) {
if ($chb.prop('checked')) return;
}
}
if (this.name === null || this.name === undefined || this.name === '')
return;
var elemValue = null;
if ($(this).is('select'))
elemValue = $(this).find('option:selected').val();
else
elemValue = this.value;
if (o[this.name] !== undefined) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(elemValue || '');
}
else {
o[this.name] = elemValue || '';
}
});
return o;
}
此线程似乎已成为表单序列化的常见问题解答：）
我对PHP命名的看法：<input name=“user[name]”>
$('form').on('submit', function(ev) {
ev.preventDefault();
var obj = $(this).serializePHPObject();
// $.post('./', obj);
});
(function ($) {
// based on https://stackoverflow.com/a/25239999/1644202
// <input name="user[name]" >
$.fn.serializePHPObject = function () {
var obj = {};
$.each(this.serializeArray(), function (i, pair) {
var cObj = obj,
pObj,
cpName;
$.each(pair.name.split("["), function (i, pName) {
pName = pName.replace("]", "");
pObj = cObj;
cpName = pName;
cObj = cObj[pName] ? cObj[pName] : (cObj[pName] = {});
});
pObj[cpName] = pair.value;
});
return obj;
};
})(jQuery);
