使用 Jquery SerializeArray() 获取 JSON 键值对答案

【问题标题】：Get JSON key-value pairs by using Jquery SerializeArray()使用 Jquery SerializeArray() 获取 JSON 键值对
【发布时间】：2020-02-01 11:51:34
【问题描述】：

如何序列化表单

我想要什么

[{"itemId[0]":"143","quantity[0]":"0"},
{"itemId[1]":"142","quantity[1]":"0"}]

返回的输出

[{"name":"itemId[0]","value":"143"},{"name":"quantity[0]","value":"0"},
{"name":"itemId[1]","value":"142"},{"name":"quantity[1]","value":"0"}]

我知道这个问题非常相似 jQuery serializeArray() key value pairs，但还是没解决。

到目前为止我的代码

javascript

....
for (var i = 0; i < checkboxes.length; i++) {

   var p1 = '<tr><td><input type="hidden" name="itemId[' + i + ']" value="' + cid + '" />';
   var p2 = '</td><td><input type="number" name="quantity[' + i + ']" value="0"/>';
   $('#tbody').append(p1 + p2 +'</td></tr>');
}


$('#getlist').click( function() {
   var formData = JSON.stringify($("#sendform").serializeArray());

alert(formData);

}

表格

<form action="" method="POST" id="sendform">
   <table class="table table-md tabledata table-bordered" id="user_data">
   <thead>
     <tr>
       <th>Item id</th>
       <th>Quantity</th>
     </tr>
   </thead>
   <tbody id="tbody">
   ....


  <button class="btn btn-success" id="getlist">Submit</button>
</form>

已经试过了

var complex = $("#sendform").serialize(); // name1=value1&name2=value2
var json = toSimpleJson(complex); // {"name1":"value1", "name2":"value2"}

function toSimpleJson(serializedData) {
   var ar1 = serializedData.split("&");
   var json = "{";
   for (var i = 0; i<ar1.length; i++) {
      var ar2 = ar1[i].split("=");
      json += i > 0 ? ", " : "";
      json += "\"" + ar2[0] + "\" : ";
      json += "\"" + (ar2.length < 2 ? "" : ar2[1]) + "\"";
   }
   json += "}";
   return json;
}

{"itemName%5B0%5D":"143","quantity%5B0%5D":"0","itemName%5B1%5D":"142", "quantity%5B1%5D":"0","itemName%5B2%5D":"141","quantity%5B2%5D":"0"}

【问题讨论】：

标签： jquery forms serialization

【解决方案1】：

遍历<tr> 元素并像这样构建数组：

$(function() {
    var serialized = [];

    $("tr").each(function() {
        var itemId   = $(this).find("[name^='itemId']");
        var quantity = $(this).find("[name^='quantity']");
        
        serialized.push({
            [itemId.attr("name")]   : itemId.val(),
            [quantity.attr("name")] : quantity.val()
        })
    });

    console.log(serialized);
})

<table>
    <tbody>
        <tr>
            <td><input type="hidden" name="itemId[0]" value="143" /></td>
            <td><input type="number" name="quantity[0]" value="0" /></td>
        </tr>
        <tr>
            <td><input type="hidden" name="itemId[1]" value="142" /></td>
            <td><input type="number" name="quantity[1]" value="0" /></td>
        </tr>
    </tbody>
</table>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

【讨论】：