如何为ajax序列化表数据

Question

Bootstrap 3 模态表包含带有输入、文本区域和选择元素的行。 所有行都有相同的列和相同的元素。每一行中的元素都有相同的名称。

应该使用 jquery ajax 调用通过按钮单击发送表数据。 我试过了

$.ajax("api/Raport",
{
    contentType: "application/json",
    data: JSON.stringify({
        elements: { param1: 1, param2: 2} ,
        variable: $("#reportVariablesTable").serializeArray()
    }),
    type: 'POST'
});

但是变量属性是空数组。

如何将表列值序列化为变量属性，例如：

[
{ name: "variable1", valuetostore: "a-b", totaltype: "Lowest" },
...

]

如果可能，不要提交隐藏行（可能不是表中的第一行）

这是 ASP .NET MVC4 应用程序。 如果有帮助，可以重构 Html 代码。

查看：

<div class="modal" id="reportVariables" tabindex="-1" role="dialog" aria-labelledby="reportVariablesLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <table class="table table-condensed table-striped" id="reportVariablesTable">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Value</th>
                            <th>Calculate</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- table contains one hidden rows which should not -->
                        <tr style='display:none'>
                            <td>
                                <input type="text" name="name">
                            </td>

                            <td>
                                <textarea name="valuetostore"></textarea>
                            </td>

                            <td>
                                <select class="totaltype-select" id="totaltype" name="totaltype">
                                    <option value=""></option>
                                    <option value="Sum">Summary</option>
                                    <option value="Lowest">Smallest</option>
                                    <option value="Highest">Biggers</option>
                                </select>
                            </td>
                        </tr>

                        <!-- other are data rows which should sent -->
                        <tr>
                            <td>
                                <input type="text" name="name" value="variable1">
                            </td>

                            <td>
                                <textarea name="valuetostore">a-b</textarea>
                            </td>

                            <td>
                                <select class="totaltype-select" id="totaltype" name="totaltype">
                                    <option value=""></option>
                                    <option value="Sum">Summary</option>
                                    <option value="Lowest" selected>Smallest</option>
                                    <option value="Highest">Biggers</option>
                                </select>
                            </td>
                        </tr>
                        ... remaining rows
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

我将表格放入表格并使用

    variable: $("#reportVariablesForm").serialize(), 

它被序列化为包含名称/值对象的巨大数组：

如何解决这个问题，以便将表单序列化为数组，该数组包含一个元素，每一行的属性名称来自行元素名称：

[
{ name: "variable1", valuetostore: "a-b", totaltype: "Lowest" },
...

]

Answer 1

.serializeArray() 方法创建一个 JavaScript 对象数组， 准备好被编码为 JSON 字符串。它在 jQuery 上运行 表单和/或表单控件的集合。

您的 HTML 中需要一个 form 标记。

$(function() {
  $("#btnShow").on("click", function() {
    console.log($("#myForm").serializeArray());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="modal" id="reportVariables" tabindex="-1" role="dialog" aria-labelledby="reportVariablesLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <form id="myForm">
          <table class="table table-condensed table-striped" id="reportVariablesTable">
            <thead>
              <tr>
                <th>Name</th>
                <th>Value</th>
                <th>Calculate</th>
              </tr>
            </thead>
            <tbody>
              <!-- table contains one hidden rows which should not -->
              <tr style='display:none'>
                <td>
                  <input type="text" name="name">
                </td>

                <td>
                  <textarea name="valuetostore"></textarea>
                </td>

                <td>
                  <select class="totaltype-select" id="totaltype" name="totaltype">
                    <option value=""></option>
                    <option value="Sum">Summary</option>
                    <option value="Lowest">Smallest</option>
                    <option value="Highest">Biggers</option>
                  </select>
                </td>
              </tr>

              <!-- other are data rows which should sent -->
              <tr>
                <td>
                  <input type="text" name="name" value="variable1">
                </td>

                <td>
                  <textarea name="valuetostore">a-b</textarea>
                </td>

                <td>
                  <select class="totaltype-select" id="totaltype" name="totaltype">
                    <option value=""></option>
                    <option value="Sum">Summary</option>
                    <option value="Lowest" selected>Smallest</option>
                    <option value="Highest">Biggers</option>
                  </select>
                </td>
              </tr>
              ... remaining rows
            </tbody>
          </table>
          <button id="btnShow" type="button">
            Show
          </button>
        </form>

      </div>
    </div>
  </div>
</div>

Answer 2

将数据放入表单，并在表单上调用.serialize()。