Question

我在页面上有多种形式，我正在尝试使用jquery将这些形式的输入构建为一个JSON结构以进行POST。假设它看起来像这样：

function submitData() {
  var serializedData = []
  var forms = $("form");

  forms.each(function(i) {
    serializedData.push({
      i: $(this).serializeArray()
    });
  });

  console.log(serializedData);
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Learner</th>
      <th scope="col">Date</th>
      <th scope="col">Period</th>
      <th scope="col">Subject</th>
      <th scope="col">Teacher</th>
      <th scope="col"></th>
    </tr>
  </thead>
  <tbody>
    <form>
      <tr>
        <th scope="row">1</th>
        <td><input type="text" name="learner"></td>
        <td><input type="date" name="date"></td>
        <td><input type="text" name="period"></td>
        <td><input type="text" name="subject"></td>
        <td><input type="text" name="staff"></td>
        <td><button type="button">Delete</button></td>
      </tr>
    </form>
    <form>
      <tr>
        <th scope="row">1</th>
        <td><input type="text" name="learner"></td>
        <td><input type="date" name="date"></td>
        <td><input type="text" name="period"></td>
        <td><input type="text" name="subject"></td>
        <td><input type="text" name="staff"></td>
        <td><button type="button">Delete</button></td>
      </tr>
    </form>
    <form>
      <tr>
        <th scope="row">1</th>
        <td><input type="text" name="learner"></td>
        <td><input type="date" name="date"></td>
        <td><input type="text" name="period"></td>
        <td><input type="text" name="subject"></td>
        <td><input type="text" name="staff"></td>
        <td><button type="button">Delete</button></td>
      </tr>
    </form>
  </tbody>
</table>

<button type="button" onclick="submitData()">Submit Data</button>

我想做的是从表单值构建JSON。这样可以正确构建我要查找的结构，但是很奇怪，它只能填充第一个表单中的数据。即我明白了：

[{
  "i": [{
    "name": "learner",
    "value": "My Name"
  }]
},{
  "i":  []
}]

为什么它会跳过第二个（及后续）表单中的数据，却按我预期的那样工作？

Answer 1

问题是因为您的HTML无效。您不能将src/ -assets/ -i18n/ -index.js -en/ -translation.json -es/ -translation.json -main.ts元素作为form的子元素。如果检查DOM，您将看到tbody元素已移动并且现在没有内容，因此form的输出为空。

要执行此操作，您需要将serializeArray() 放在之外form，尽管这反过来意味着您不能在每个元素周围包含多个table元素行。如果需要后者，则不能为此布局使用form。

将serializeArray（）放入数组不会产生预期的输出

1 个答案: