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

我想使用jquery序列化表单数据

2 个答案: