将表单序列化为不带空值的json

Serialize form as json without empty values

本文关键字：空值 json 表单 序列化      更新时间：2023-09-26

我有一个包含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: '' }。如何避免序列化没有值的字段？

这里有一种修改函数的方法

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 );

并且它们被过滤掉

试试这个：

    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);

您可以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();
});
相关文章：