将表单序列化为没有空值的 json

Posted 2023-05-09

【中文标题】将表单序列化为没有空值的 json

【英文标题】：Serialize form as json without empty values

【发布时间】：2016-12-08 08:16:36

【问题描述】：

我有一个包含 3 个字段的 html 表单。我想将它们序列化为 json 对象（到目前为止，使用我的 getFormData($form) 方法有效。但现在我想在我的表单中排除所有没有 inputtext/value 的字段。

这会序列化我的表单并将其保存为 json 对象：

function getFormData($form)
    var unindexed_array = $form.serializeArray();
    var indexed_array = ;

    $.map(unindexed_array, function(n, i)
        indexed_array[n['name']] = n['value'];
    );

    return indexed_array;

这就是我尝试过滤没有值的字段的方式：

var form = $("#bulk-edit-fut-account-form :input[value!='']");
console.log(JSON.stringify(form));
var formData = getFormData(form);

我的 HTML 表单：

<form id="bulk-edit-fut-account-form" class="form-horizontal" novalidate="novalidate"><div class="form-group"><label class="col-sm-3 control-label">Id<span class="asterisk">*</span></label><div class="col-sm-9"><input id="bulkAccountIds" type="text" required="" readonly="" value="118 119 " data-id="[&quot;Id&quot;:118,&quot;Id&quot;:119]" class="form-control valid" aria-required="true"></div></div><div class="form-group"><label class="col-sm-3 control-label">Max. Requests / minute</label><div class="col-sm-9"><input type="number" name="RequestsPerMinute" placeholder="Type maximum amount of reqs/min..." class="form-control valid"></div></div><div class="form-group"><label class="col-sm-3 control-label">Request Threshold</label><div class="col-sm-9"><input type="number" name="Threshold" placeholder="Type fastest timeframe for 1 request in seconds..." class="form-control valid"></div></div><div class="form-group"><label class="col-sm-3 control-label">Comment</label><div class="col-sm-9"><textarea name="Comment" rows="5" class="form-control"></textarea></div></div></form>

问题：

使用上面的代码，它仍然会序列化空字段（但我想避免这种情况）。这是结果 RequestsPerMinute: '121', Threshold: '', Comment: '' 。如何避免序列化没有值的字段？

【问题讨论】：

您可以尝试从您的var form = $("#bulk-edit-fut-account-form :input[value!='']"); 中删除: 吗？

@TylerRoper 实际上这可能是正确的。现在它忽略了我的“评论”字段，它是一个文本区域，它仍然不过滤空值字段。看来我的想法没有达到预期效果。

查看我的答案，如果可行，请告诉我。

为什么是 JSON，为什么你不将它序列化为 x-www-form-encoded 并使用form.serialize()

@adeneo 因为我使用 websockets 并将它与其他信息一起传递。我尽可能简化了这里的问题。由于其他原因，我也需要它

【参考方案1】：

这是修改函数的一种方法

function getFormData($form, no_empty) 
    var unindexed_array = $form.serializeArray();
    var indexed_array = ;

    $.map(unindexed_array, function(n, i) 
        indexed_array[n['name']] = n['value'];
    );

    if (no_empty) 
        $.each(indexed_array, function(key, value) 
            if ( $.trim(value) === "" ) delete indexed_array[key];
        );
    

    return indexed_array;

当您不想正常调用它并包含所有内容时，您只需这样做

 var json = getFormData( form );

当您不想要空输入时，您只需这样做

 var json = getFormData( form, true );

它们被过滤掉了

【讨论】：

感谢您的回答，但我也在其他要序列化空字段的地方使用该方法。如果没有更好的解决方案，我会尝试你的答案。

【参考方案2】：

试试这个：

    var form = $(); //Initialize empty jQuery object

    //Iterate through all inputs, textareas
    $('#bulk-edit-fut-account-form input, #bulk-edit-fut-account-form textarea').each(function() 

        //Add to jQuery object if not empty
        if ($(this).val().length) 
           form = form.add($(this)); 
        

    )

    console.log(JSON.stringify(form));
    var formData = getFormData(form);

【讨论】：

我认为问题在于我没有正确描述问题。这与“属性”值无关，因为它是一个输入文本框。我想检查这个文本框是否为空。如果为空 => 过滤

空文本框和没有值的文本框有什么区别？我上面的例子说“如果文本框没有值，或者文本框有一个空白值，则排除它”。

我已经尝试过您的解决方案。它过滤所有字段，无论它们是否有内容。

我的意思是你的另一个选择是为每个输入和文本区域做一个$.each，如果有一个值，把它添加到form。

@kentor 我最近的最后一次更新 - 将数组更改为 jQuery 对象以匹配您的原始脚本。

【参考方案3】：

您可以 filter 并删除 .val() 为空的元素：

$.map(unindexed_array, function(n, i)
    indexed_array[n['name']] = n['value'];
).filter(function() 
    // will be removed from array if empty
    return $(this).val();
);

【讨论】：

感谢您的回答，但我也在其他要序列化空字段的地方使用该方法。如果没有更好的解决方案，我会尝试你的答案。