使用jQuery将表单数据转换为JavaScript对象

如何将表单的所有元素转换为JavaScript对象？

我希望有某种方法从表单自动构建JavaScript对象，而不必遍历每个元素。我不希望使用$（'#formid'）.serialize（）；返回的字符串；，我也不希望$（'#formid'）.serializeArray（）返回映射；

当前回答

在不检查每个元素的情况下，确实无法做到这一点。您真正想知道的是“是否有其他人已经编写了一个将表单转换为JSON对象的方法？”类似于下面的内容应该可以工作——请注意，它只会为您提供通过POST返回的表单元素（必须有名称）。这是未测试的。

function formToJSON( selector )
{
     var form = {};
     $(selector).find(':input[name]:enabled').each( function() {
         var self = $(this);
         var name = self.attr('name');
         if (form[name]) {
            form[name] = form[name] + ',' + self.val();
         }
         else {
            form[name] = self.val();
         }
     });

     return form;
}

2009-07-26 14:01:00

其他回答

我发现所选解决方案有问题。

当使用具有基于数组的名称的表单时，jQueryserializeArray（）函数实际上会失效。

我有一个PHP框架，它使用基于数组的字段名，允许在多个视图中将同一表单多次放在同一页面上。这可以方便地将添加、编辑和删除都放在同一页上，而不会出现表单模型冲突。

由于我想在不使用这种绝对基本功能的情况下对表单进行序列化，我决定编写自己的seralizeArray（）：

        var $vals = {};

        $("#video_edit_form input").each(function(i){
            var name = $(this).attr("name").replace(/editSingleForm\[/i, '');

            name = name.replace(/\]/i, '');

            switch($(this).attr("type")){
                case "text":
                    $vals[name] = $(this).val();
                    break;
                case "checkbox":
                    if($(this).attr("checked")){
                        $vals[name] = $(this).val();
                    }
                    break;
                case "radio":
                    if($(this).attr("checked")){
                        $vals[name] = $(this).val();
                    }
                    break;
                default:
                    break;
            }
        });

请注意：这也适用于表单submit（）之外，因此如果在代码的其余部分发生错误，如果您单击“保存更改”的链接按钮，表单将不会提交。

还请注意，此函数不应仅用于验证表单以收集要发送到服务器端进行验证的数据。使用这种弱的和大量分配的代码将导致XSS等。

2011-06-20 09:46:28

另一个答案

document.addEventListener（“DOMContentLoaded”，函数（）{setInterval（函数）{var form=document.getElementById（'form'）||document.querySelector（'form[name=“userprofile”]'）；var json=Array.from（new FormData（form））.map（函数（e，i）｛this[e[0]〕=e[1]；return this；｝.bind（｛｝））[0]；console.log（json）document.querySelector（'#asJSON'）.value=JSON.stringify（JSON）；}, 1000);})<form name=“userprofile”id=“form”><p>名称<input-type=“text”Name=“firstname”value=“John”/></p><p>姓氏<input name=“lastname”value=“Smith”/></p><p>工作<input name=“employment[name]”value=“inc，inc.”/></p><p>工作时间：<input name=“employment[since]”value=“2017”/></p><p>照片<input-type=“file”/></p><p>发送<input-type=“submit”/></p></form>JSON:<textarea id=“asJSON”></textarea>

表单数据：https://developer.mozilla.org/en-US/docs/Web/API/FormData

2017-10-20 16:08:48

function formToJSON( selector )
{
     var form = {};
     $(selector).find(':input[name]:enabled').each( function() {
         var self = $(this);
         var name = self.attr('name');
         if (form[name]) {
            form[name] = form[name] + ',' + self.val();
         }
         else {
            form[name] = self.val();
         }
     });

     return form;
}

2009-07-26 14:01:00

这会把一切都考虑在内

函数formToObject（表单）{let data=新FormData（表单）；let queryString=新URLSearchParams（data）.toString（）；var obj={}；var params=queryString.split（“&”）；对于（var i=0；i<params.length；i++）{var param=params[i].split（“=”）；var key=param[0].replace（“[]”，“”）；var key=密钥.替换（“%5B%5 D”，“”）；var值=参数[1]；if（obj[key]==未定义）{obj[key]=值；}else if（数组的obj[key]实例）{obj[key].push（值）；}其他{obj[key]=[obj[key]，值]；}}控制台日志（obj）返回obj；}<!DOCTYPE html><html><head><title>表单示例</title></head><body style=“height:800px；溢出：滚动”><form id=“test”onchange=“formToObject（this）”><div><h3>水果</h3><input type=“checkbox”name=“fruit”value=“apple”id=“apple“><label for=“apple”>Apfel</label><input-type=“checkbox”name=“fruit”value=“banana”id=“banana“><label for=“banana”>Banane</label><input type=“checkbox”name=“fruit”value=“cherry”id=“cherr”><label for=“cherry”>Kirsche</label><input type=“checkbox”name=“fruit”value=“葡萄”id=“葡萄”><label for=“葡萄”>Traube</label><input type=“checkbox”name=“fruit”value=“pear”id=“pear“><label for=“pear”>Birne</label></div><div><h3>多个选项</h3><select multiple name=“manyOptions[]”><option value=“选项1”>选项1</option><option value=“option 2”>选项2</option><option value=“选项3”>选项3</option></选择></div>＜div＞＜h3＞检查选项</h3><input type=“radio”name=“onceOption”value=“Option 1”>选项1<br><input type=“radio”name=“onceOption”value=“Option 2”>选项2<br><input type=“radio”name=“onceOption”value=“Option 3”>选项3<br></div></form></body></html>

2022-12-09 09:29:18

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中发现了这个函数，并编写了一个到对象的转换器，这样数组就变成了一个对象。

2021-06-16 15:20:33

使用jQuery将表单数据转换为JavaScript对象

推荐文章

最新文章

标签