如何将表单的所有元素转换为JavaScript对象?
我希望有某种方法从表单自动构建JavaScript对象,而不必遍历每个元素。我不希望使用$('#formid').serialize();返回的字符串;,我也不希望$('#formid').serializeArray()返回映射;
如何将表单的所有元素转换为JavaScript对象?
我希望有某种方法从表单自动构建JavaScript对象,而不必遍历每个元素。我不希望使用$('#formid').serialize();返回的字符串;,我也不希望$('#formid').serializeArray()返回映射;
当前回答
使用此项:
var sf = $('#mainForm').serialize(); // URL encoded string
sf = sf.replace(/"/g, '\"'); // Be sure all "s are escaped
sf = '{"' + sf.replace(/&/g, '","'); // Start "object", replace tupel delimiter &
sf = sf.replace(/=/g, '":"') + '"}'; // Replace equal sign, add closing "object"
// Test the "object"
var formdata = eval("(" + sf + ")");
console.log(formdata);
即使在非常复杂的形式上,它也像一种魅力。
其他回答
这将处理具有相同名称的多个select或偶数元素:
$.fn.formToJSON = function(){
pairStr=this.serialize();
let rObj={};
pairStr.split(`&`).forEach((vp)=> {
prop=vp.split(`=`)[0];
val=vp.split(`=`)[1];
if(rObj.hasOwnProperty(prop)) {
if (Array.isArray(rObj[prop])) {
rObj[prop].push(val);
} else {
rObj[prop]=[rObj[prop]];
rObj[prop].push(val);
}
} else {
rObj[prop]=val;
}
});
return JSON.stringify(rObj);
}
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中发现了这个函数,并编写了一个到对象的转换器,这样数组就变成了一个对象。
此函数返回转换为正确类型的所有值;
bool/string/(integer/floats)可能
虽然您需要jQuery来实现这一点,但由于serializeArray也是jQuery,所以没什么大不了的。
/**
* serialized a form to a json object
*
* @usage: $("#myform").jsonSerialize();
*
*/
(function($) {
"use strict";
$.fn.jsonSerialize = function() {
var json = {};
var array = $(this).serializeArray();
$.each(array, function(key, obj) {
var value = (obj.value == "") ? false : obj.value;
if(value) {
// check if we have a number
var isNum = /^\d+$/.test(value);
if(isNum) value = parseFloat(value);
// check if we have a boolean
var isBool = /^(false|true)+$/.test(value);
if(isBool) value = (value!=="false");
}
json[obj.name] = value;
});
return json;
}
})(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;
});
jQuery中有一个插件jQuery.serializeJSON。我已经在几个项目中成功地使用了它。它就像一个符咒。