使用 SerializeJSON 序列化表单答案

【问题标题】：Serialize form using SerializeJSON使用 SerializeJSON 序列化表单
【发布时间】：2020-03-11 07:30:37
【问题描述】：

我想使用 SerializeJSON 序列化我的表单，我有一个 div，里面有多个选项卡，每个选项卡都有多个表单。我如何在 div 内循环以获取选项卡，在每个选项卡内我想获取表单，以便我可以对其进行序列化，然后根据所需的结构将其放入数组中。

<div class="clamp-content">
<div id="tab1">

<form id="materialinfo">
<input name="plateMaterial">
<input name="plateMaxAllowableStressDesignTemperature">
</form>


<form id="defectparam">
<input name="Def_L">
<input name="DefL_2">
</form>

</div>

<div id="tab2">
<form id="materialinfo">
<input name="plateMaterial">
<input name="plateMaxAllowableStressDesignTemperature">
</form>


<form id="defectparam">
<input name="Def_L">
<input name="DefL_2">
</form>
</div>
</div>

我想要的欲望结构是这样的：

CaseInfo: 
0: {{plateMaterial:"plateMaxAllowableStressDesignTemperature"}, {Def_L: "", DefL_2: ""}
1: {{plateMaterial:"plateMaxAllowableStressDesignTemperature"}, {Def_L: "", DefL_2: ""}

我尝试过这样的事情：


var designParameter = [];
var form = {};

function save() {
    $('.clamp-content').children().each(function () {
        $(this).find('form').each(function () {
            form = $(this).serializeJSON();
            console.log(form)
        });

    });
}

但是当我控制台记录表单时，我得到的是：

{plateMaterial: "", plateMaxAllowableStressDesignTemperature: "", plateMaxAllowableStressOperatingTemperature: "", plateThickness: "", boltMaterial: "", …}
{Def_L: "", DefL_2: "", Def_D: "", DefD_3: "", DefD_2: "", …}
{plateMaterial2: "", plateMaxAllowableStressDesignTemperature2: "", plateMaxAllowableStressOperatingTemperature2: "", plateThickness2: "", boltMaterial2: "", …}
{Def_L2: "", DefL_22: "", Def_D2: "", DefD_32: "", DefD_22: "", …}

任何帮助将不胜感激。谢谢你:)

【问题讨论】：

标签： jquery arrays json serializearray

【解决方案1】：

您想使用.each() 来迭代每个表单。

var designParameter = [];

function getFormData(f) {
  return $(f).serializeJSON();
}

function saveAllForms(){
  var results = [];
  $(".clamp-content form").each(function(i, el){
    results.push(getFormData(el));
  });
  return results;
}

designParameter = saveAllForms();
console.log(designParameter);

如果你愿意，你也可以稍微改进一下结果。

function saveAllForms(){
  var results = {}, id, d;
  $(".clamp-content form").each(function(i, el){
    id = $(el).attr("id");
    d = getFormData(el);
    results[id] = d;
  });
  return results;
}

例子：

$(function() {

  var designParameter = [];

  function getFormData(f) {
    return $(f).serializeJSON();
  }

  function saveAllForms() {
    var results = [];
    $(".clamp-content form").each(function(i, el) {
      results.push(getFormData(el));
    });
    return results;
  }

  designParameter = saveAllForms();
  console.log(designParameter);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.serializeJSON/2.9.0/jquery.serializejson.js"></script>

<div class="clamp-content">
  <div id="tab1">
    <form id="materialinfo">
      <input name="plateMaterial">
      <input name="plateMaxAllowableStressDesignTemperature">
    </form>
    <form id="defectparam">
      <input name="Def_L">
      <input name="DefL_2">
    </form>
  </div>
  <div id="tab2">
    <form id="materialinfo">
      <input name="plateMaterial">
      <input name="plateMaxAllowableStressDesignTemperature">
    </form>
    <form id="defectparam">
      <input name="Def_L">
      <input name="DefL_2">
    </form>
  </div>
</div>

【讨论】：