Question

Bootstrap 3模态表包含带有input，textarea和select元素的行。所有行都具有相同的具有相同元素的列。每一行中的元素都有相同的名称。

应使用按钮单击使用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(),

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

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

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

]

Answer 1

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

Answer 2

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

如何序列化ajax的表数据

2 个答案: