ajaxのテーブルデータをシリアル化する方法

Question

ブートストラップ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' 
}); 

ですが、変数プロパティは空の配列です。これは、ASP .NET MVC4アプリケーションで

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

] 

可能であれば隠し列を送信しない（表の最初のない行であってもよい）

：どのような変数プロパティにテーブルの列の値をシリアル化する

。 これが役立つ場合は、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> 

私は、フォームにテーブルを入れて、それが名前/値オブジェクトを含む巨大なarrvyにシリアライズ伊勢

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

を使用：

どのようにこれを修正して、フォームが1つのeを含む配列にシリアル化されるようにします行要素名からプロパティ名を持つすべての行のためのlement：

[ 
{ 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()を呼び出します。