我想序列化使用jQuery的表單數據

Question

你好我工作的數據使用jQuery的序列化

我已經粘貼我的HTML代碼下面。

HTML

<div class="row"> 
    <div class="col-md-12 col-sm-12"> 
     <div class="ibox-content"> 
      <form id="product"> 
       <table class="table"> 
        <thead> 
         <tr> 
          <th>Action</th> 
          <th>Product Name</th> 
          <th>Price</th> 
          <th>Qty</th> 
          <th>Total</th> 
         </tr> 
        </thead> 
        <tbody> 
         @foreach (var _product in Model.ProductList) 
         { 
          <tr> 
           <td><a href="javascript:;">Details</a></td> 
           <td> 
            <strong> 
             @_product.name 
             <input type="hidden" name="productId" value="@_product.productId" /> 
            </strong> 
           </td> 
           <td id="price">@_product.wholesalePrice</td> 
           <td id="quantity"><input style="width:50px;" name="qty" value="0"><input type="hidden" name="total" id="rowTotal" /></td> 
           <td id="value"></td> 
          </tr> 
         } 
        </tbody> 
       </table> 
      </form> 
      <div class="ibox-content"> 
       <button id="totalCal" class="btn btn-primary pull-right">Calculate</button> 
      </div> 
      <table class="table invoice-total"> 
       <tbody> 
        <tr> 
         <td><strong>Sub Total :</strong></td> 
         <td id="result">$1026.00</td> 
        </tr> 
        <tr> 
         <td><strong>Shipping :</strong></td> 
         <td id="Shipping">$235.98</td> 
        </tr> 
        <tr> 
         <td><strong>TOTAL :</strong></td> 
         <td id="finalTotal">$1261.98</td> 
        </tr> 
       </tbody> 
      </table> 
     </div> 
    </div> 
</div> 

jQuery函數

function GetTblRow() { 
    var data = $("#product").serializeArray(); 
    var from = JSON.stringify(data); 
    console.log(from); 
}; 

輸出

[{"name":"productId","value":"1"},{"name":"qty","value":"0"},{"name":"total","value":"0"},{"name":"productId","value":"2"},{"name":"qty","value":"0"},{"name":"total","value":"0"},{"name":"productId","value":"3"},{"name":"qty","value":"0"},{"name":"total","value":"0"},{"name":"productId","value":"4"},{"name":"qty","value":"0"},{"name":"total","value":"0"},{"name":"productId","value":"5"},{"name":"qty","value":"0"},{"name":"total","value":"0"},{"name":"productId","value":"6"},{"name":"qty","value":"0"},{"name":"total","value":"0"},{"name":"productId","value":"7"},{"name":"qty","value":"0"},{"name":"total","value":"0"},{"name":"productId","value":"8"},{"name":"qty","value":"0"},{"name":"total","value":"0"},{"name":"productId","value":"9"},{"name":"qty","value":"0"},{"name":"total","value":"0"},{"name":"productId","value":"10"},{"name":"qty","value":"0"},{"name":"total","value":"0"},{"name":"productId","value":"12"},{"name":"qty","value":"0"},{"name":"total","value":"0"},{"name":"productId","value":"13"},{"name":"qty","value":"0"},{"name":"total","value":"0"}] 

期望輸出

[{"ProductId":"1","qty":"0","total":"0"},"ProductId":"1","qty":"0","total":"0"},{"ProductId":"2","qty":"0","total":"0"},{"ProductId":"3","qty":"0","total":"0"},{"ProductId":"4","qty":"0","total":"0"}] 

我做上面連載的形式數據的代碼，但我不能得到預期的輸出上面。那麼你能幫助我嗎？

Answer 1

你不能直接使用serializeArray()獲得預期的JSON你必須預期的結果，從陣列

<script> 
$.fn.serializeObject = function() 
{ 
    var o = {}; 
    var a = this.serializeArray(); 
    $.each(a, function() { 
     if (o[this.name] !== undefined) { 
      if (!o[this.name].push) { 
       o[this.name] = [o[this.name]]; 
      } 
      o[this.name].push(this.value || ''); 
     } else { 
      o[this.name] = this.value || ''; 
     } 
    }); 

    return o; 
}; 

$(function() { 
    $("#totalCal").click(function(){ 
     alert(JSON.stringify($('#product').serializeObject())); 

     return false; 
    }); 
}); 
</script> 

Answer 2

分開你可以使用一些自定義代碼來格式化你的陣列。這裏是最簡單的解決方案：

function getFormattedArray(array){ 
    var result = []; 

    for(var currentPosition = 0;currentPosition < array.length; currentPosition += 3) { 
    result.push({ProductId: array[currentPosition].value, 
       qty: array[currentPosition+1].value, 
       total: array[currentPosition+1].value});  
    } 

    return result; 
}