如何为 ajax 序列化 table 数据

Question

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

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

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

但是变量属性是空数组。

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

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

]

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

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

查看：

<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>

我把table填入表格并使用了

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

它被序列化为包含 name/value 个对象的巨大数组：

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

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

]

Answer 1

将数据放在一个表单中，然后在表单上调用.serialize()。

Answer 2

The .serializeArray() method creates a JavaScript array of objects, ready to be encoded as a JSON string. It operates on a jQuery collection of forms and/or form controls.

您的 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>

如何为 ajax 序列化 table 数据

How to serialize table data for ajax

javascript

jquery

json

ajax

serializearray