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

Question

代码示例：

        $('#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() 时如何添加额外的键？

所需的输出是：

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

标签： javascriptjqueryarraysjsonmongodb

Answer 1

抱歉回复晚了，正忙于中小企业工作......你可以通过两种方式做到这一点

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