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

Posted 2023-05-09

【中文标题】使用 Jquery SerializeArray() 获取 JSON 键值对

【英文标题】：Get JSON key-value pairs by using Jquery SerializeArray()

【发布时间】：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"

【参考方案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>