使用 .serializeArray() Javascript 时如何自定义键值对？

Posted 2023-05-08

【中文标题】使用 .serializeArray() Javascript 时如何自定义键值对？

【英文标题】：How to customize key-value pairs when using .serializeArray() Javascript?

【发布时间】：2021-10-09 04:21:00

【问题描述】：

代码示例：

        $('#simpan').click(function()
            var data = $('.serialize').serializeArray();
            console.log(data)
        )

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="row">
        <div class="col-lg-12">
            <label><input type="radio" name="perkawinan" id="" class="form-control-sm serialize" value="belum kawin" data-title="Perkawinan"><b> Belum Kawin</b></label>&emsp;
            <label><input type="radio" name="perkawinan" id="" class="form-control-sm serialize" value="kawin" data-title="Perkawinan"><b> Kawin</b></label>&emsp;
            <label><input type="radio" name="perkawinan" id="" class="form-control-sm serialize" value="duda/janda" data-title="Perkawinan"><b> Duda/Janda</b></label>&emsp;
            <label><input type="radio" name="perkawinan" id="" class="form-control-sm serialize" value="bawah umur" data-title="Perkawinan"><b> Bawah Umur</b></label>&emsp;
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <input type="text" name="pekerjaan" id="" class="form-control form-control-sm serialize" placeholder="Pekerjaan..." data-title="Pekerjaan">
        </div>
    </div>
  <div class="row">
        <button type="button" class="btn btn-sm btn-outline-success" id="simpan">SIMPAN</button>
    </div>

结果将是一个对象数组，其中包含名称和值的键-值对。执行.serializeArray()时如何添加额外的key？

想要的输出是：

[
  
    "name": "perkawinan",
    "value": "kawin",
    "title": "Status Perkawinan",
    "type": "radio"
  ,
  
    "name": "pekerjaan",
    "value": "",
    "title": "Pekerjaan Pasien",
    "type": "text"
  
] 

【参考方案1】：

抱歉回复晚了，忙于sme工作...您可以通过两种方式做到这一点

HTML

<div class="container">
    <div class="row">
        <form action="" method="post" enctype="multipart/form-data" class="serialize">
            <div clas="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <div class="custom-control custom-radio custom-control-inline">
                  <input type="radio" name="perkawinan" class="custom-control-input" value="Belum Kawin" data-title="Title 1">
                  <label class="custom-control-label" for="customRadioInline1">Belum Kawin</label>
                
                  <input type="radio" name="perkawinan" class="custom-control-input" value="Duda/Janda"  data-title="Title 2">
                  <label class="custom-control-label" >Duda/Janda</label>
                </div>
                
                <div class="form-group" style="margin:15px 0">
                    <label>Pekerjaan</label>
                    <input type="text" name="pekerjaan" class="form-control" placeholder="Pekerjaan"  data-title="Title 3">
                </div>
            </div>
            
            <div clas="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <input name="submit" type="button" value="Submit" id="simpan" class="btn btn-success">
            </div>
        </form>
        
        <div clas="col-xs-12 col-sm-12 col-md-12 col-lg-12" id="output" style="margin-top:20px"></div>
    </div>
</div>

方法一

即使文本框值为空，这也会返回对象

<script type="text/javascript">
$(function()

    $('#simpan').on('click',function()
    
        var data = $('.serialize  :input').serializeArray();
        
        var data = $.each(data, function(i,obj)obj.title = $("input[name='"+obj['name']+"']").data('title');obj.type = $("input[name='"+obj['name']+"']").attr('type'););
        $('#output').html(JSON.stringify(data))
    )
);
</script>

方法二

这将返回具有值的对象

<script type="text/javascript">
$(function()

    $('#simpan').on('click',function()
    
        var data = $( ".serialize :input").filter(function () return !!this.value;).serializeArray();
        
        var data = $.each(data, function(i,obj)obj.title = $("input[name='"+obj['name']+"']").data('title');obj.type = $("input[name='"+obj['name']+"']").attr('type'););
        $('#output').html(JSON.stringify(data))
    )
);
</script>

这是一个工作小提琴JSFiddle

【讨论】：

感谢您的回答，您的解决方案正是我正在寻找的。但是你能解释一下“！！”吗？在 this.value 之前标记？那是什么样的运算符，因为据我所知只有“！”对于“非”运算符。

检查该值是否不为null或""

哇，好的，谢谢，这会派上用场的。另外，直到现在我还不知道在变量中使用选择器（在这种情况下，每个都迭代它）。感谢您的回答，并为我提供了新的视角。祝你有美好的一天，保持健康！