如何保存此表单以供以后使用，以 JSON 格式存储序列化数据？答案

【问题标题】：How to save this Form for later, storing serialized data in JSON?如何保存此表单以供以后使用，以 JSON 格式存储序列化数据？
【发布时间】：2020-12-12 09:43:31
【问题描述】：

[已解决] 我有一个带有 2 个表的大 HTML 表单，其中一个带有静态字段和名称的小表。第二个大表通过按钮动态添加了行，这个大表中的所有字段都有行唯一名称+数字例如：sku_code_input_1，代表行ID，也显示在第一列中。因为行 ID 不代表真正的行 ID，因为我必须在分页符处添加一些“空行”以进行打印。此代码将从该输入字段中获取所有值并返回我的字符串，我认为这是在 Url 中用于 POST 目的。


     function returnArrayValues() {
        var countRow = $('#sku_details_list tr').length -3;
        var str = $( "#inboundList" ).serialize();
        
        $( "#results" ).text( countRow + " " + str); //just to show it on display
        }
      /* Results showed on screen:
      0 create_time=2020-12- 
    12T09%3A04&container_noS=MXASDOFSA&ic_numbS=IC06956251&customer_code=985652&
    unload_date=2020-12-02&
    unload_name=cxzczx&date_and_time=2020-12-10T09%3A24&
    sorting_date=2020-12-11&sorting_name=czxc&gate_numbe=95&
    putaway_date=2020-12-11&putaway_name=zxcasdas&old_ro_numb=&
    confirm_date=&confirm_name=&in_box_date=&in_box_name=&pallets_qtty_1=12&
    boxes_on_pallet_1=1&sku_code_input_1=1516566&expected_qtty_box_1=12&
    received_box_qtty_1=12&putaway_area_1=122.2.2.2&pallets_qtty_2=20&
    boxes_on_pallet_2=5&sku_code_input_2=KASDJ-XZC-56
    &expected_qtty_box_2=100&received_box_qtty_2=100&putaway_area_2=333.6.6.4
    ...... */

我不知道如何转换，存储这种输出，可能在 JSON 文件中，因为将其存储在 MySQL 数据库中可能会超时，考虑到可能有 174 行。container_noS,@987654326 @ 和 date_and_time 是必需的字段，我希望将这些字段用作返回表单其余部分的键。

我认为数组应该看起来像这样？其中Array[1] 将是来自不同表单的数据，我可以使用前 3 个值来查找我要查找的表单来调用这些值。

数组[0]{{'container_noS':'MXASDOFSA', 'ic_numbS': 'IC06956251', 'date_and_time': '2020-12-10T09%3A24'} 子数组[]{'customer_code': '985652', 'unload_date': '2020-12-02', ...}}

Array1{{'container_noS':'XASDAS', 'ic_numbS': 'IC77777', 'date_and_time': '2020-10-11T09%3A24'} 子数组[]{'customer_code': '123452', 'unload_date': '2020-10-02', ...}}

Full code here 或下面的 HTML 表格布局：

<body class="print">
<form class="container-fluid" method="post" id="inboundList" enctype="application/x-www-form-urlencoded">
    <div id="no-print" style="margin-left:10%;">
        <button type="button" id="save_button" style="margin: 0 20px 20px 0;" onclick="returnArrayValues()">Save</button>
        <button type="button" id="print_button" style="margin: 0 20px 20px 0;" onclick="window.print()">Print</button>
        <button type="reset" id="reset_button" style="margin: 0 20px 20px 0;">Reset Form</button>
        <button type="close" id="cancel_button" style="margin: 0 20px 20px 0;">Discard</button>
    
    </div>
    <div style="width:20.7cm;  background-color: yellow; page-break-inside:auto;  ;" id="printPageDiv"> <!-- Start of DIV what will be printed -->
    <div style="position:relative;"> <!-- Header of Page with logo and Container No. -->
    <img src='../../images/id_print_logo.png' height="72px" width="182px">
    <label>Created:<input type="datetime-local" step="60" pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}" 
    id="create_time" name="create_time" readonly style="width:180px; text-align:center;" value="<?php echo date('Y-m-d\TH:i')?>"></input></label>
    
    <label style="font-size:15px;font_weight:bold;  margin-left: 20px">Container Number: 
        <input type="text" name="container_noS" id="container_noS" style="font-size:15px; font_weight:bold; text-align:center; width: 180px;" maxlength="16" required></input></label>
    </div>  
    <!-- IC Number with its Barcode  -->
    <div style="position:relative; margin-top:5px; height:2cm">
    <label style="float:right; font_weight:bold;width:250px; ">IC Number: <input required type="text" name="ic_numbS" id="ic_numbS" onchange="changeTest(this.form)" 
    maxlength="16" style="font-size:20px; font_weight:bold; text-align:center;"></input></label>
    <div id="insertBarcodeHere"></div>
    </div>  
<div class="row"></div> 
<table id="rcv_head_tmpl"> <!-- Start of header table -->
    <tr><th></th><th></th><th></th><th>Date: </th><th>Name: </th></tr>
    <tr><th>Client: </th><td><input type="text" name="customer_code"></input></td>
    <th>Unloading: </th><td><input type="date" name="unload_date"></td>
    <td><input type="text" name="unload_name"></td></tr>
    
    <tr><th>Date and Time: </th><td><input type="datetime-local" step="60" pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}"  
    name="date_and_time" required></input></td>
    
    <th>Sorting: </th><td><input type="date" name="sorting_date"></td>
    <td><input type="text" name="sorting_name"></td></tr>
    
    <tr><th>Gate: </th><td><input type="text" name="gate_numbe"></input></td>
    <th>Put away: </th><td><input type="date" name="putaway_date"></td>
    <td><input type="text" name="putaway_name"></td></tr>
    
    <tr><th>OLD RO: </th><td><input type="text" name="old_ro_numb"></input></td>
    <th>Confirmation: </th><td><input type="date" name="confirm_date"></td>
    <td><input type="text" name="confirm_name"></td></tr>
    
    <tr><th></th><td></td>
    <th>Counting pcs in box: </th><td><input type="date" name="in_box_date"></td>
    <td><input type="text" name="in_box_name"></td></tr>    

</table  > <!--end of header table -->
<table id="sku_details_list"  class="tablesorter" style=" border-spacing: 1px;"> <!-- Start of SKU list table -->

    <tr><th style="width: 3%;">ID: </th><th style="width: 8%;">Total Pallets: </th><th style="width: 8%;">Boxes on Pallet: </th><th style="width: 12%;">Old Location: </th>
    <th style="width: 20%;">SKU Code: </th><th style="width: 8%;">Expected Qtty: </th><th style="width: 8%;">Received Boxes: </th><th style="width: 12%;">Putaway Location: </th></tr>
    
    <tr><td>1</td><td><input type="text" name="pallets_qtty_1"></input></td>
                        <td><input type="text" name="boxes_on_pallet_1"></input></td>
                        <td id="return_oldLocation1"></td>
                        <td><input type="text" name="sku_code_input_1" onchange="showOldLocations(this.value,this)"></input></td>
                        <td><input type="text" name="expected_qtty_box_1"></input></td>
                        <td><input type="text" name="received_box_qtty_1"></input></td>
                        <td><input type="text" name="putaway_area_1"></input></td></tr>
        
    <tr><td>2</td><td><input type="text" name="pallets_qtty_2"></input></td>
                        <td><input type="text" name="boxes_on_pallet_2"></input></td>
                        <td id="return_oldLocation2"></td>
                        <td><input type="text" name="sku_code_input_2" onchange="showOldLocations(this.value,this)"></input></td>
                        <td><input type="text" name="expected_qtty_box_2"></input></td>
                        <td><input type="text" name="received_box_qtty_2"></input></td>
                        <td><input type="text" name="putaway_area_2"></input></td></tr>

</table> <!-- End of SKU list table -->
</div> <!-- div for page to be printed -->  
<button type="button" id="row_button">Add New Row</button>

</div>
  </form>

当我尝试不同的函数来存储数据时，我得到了 [object Object] 返回，当我用我认为错误的 serialize() 转换它时，我将得到与我的第一个函数相同的输出。所以问题仍然存在，我如何阅读这个[object Object] 值，我必须相信应该是我正在寻找的正确输出。

 $('#inboundList').submit(function(e) {
e.preventDefault(); 
var form = $(this); 
form.children('input').each(function() {
    form.data($(this).attr('name'), $(this).attr('value'));
}); 
var xxx = stringify([form]);
$( "#results" ).text( xxx );
});

更新：我正在尝试使用替换 = 和 & 符号，使其成为 JSON 语法。

 function returnArrayValues() {
var countRow = $('#sku_details_list tr').length -3;
var str = $( "#inboundList" ).serialize();
var resUlt = str.replace(/=&/g,'": "", "').replace(/=/g,'": "').replace(/&/g,'", "');

$( "#results" ).text( '"table_rows": "'+countRow + '", "' + resUlt + '"'); //just to show it on display

  }

【问题讨论】：

标签： javascript jquery multidimensional-array

【解决方案1】：

您可以使用serializeArray和reduce将表单数据转换为对象：

// ES5 version

var data = $('#inboundList').serializeArray()
  .reduce(function(accu, field) {
    accu[field.name] = field.value;
    return accu;
  }, {});

console.log(data);

// ES6 version

var data = $('#inboundList').serializeArray()
  .reduce((accu, {name, value}) => ({ ...accu, [name]: value }), {});

console.log(data);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="container-fluid" method="post" id="inboundList" enctype="application/x-www-form-urlencoded">
    <div id="no-print" style="margin-left:10%;">
        <button type="button" id="save_button" style="margin: 0 20px 20px 0;" onclick="returnArrayValues()">Save</button>
        <button type="button" id="print_button" style="margin: 0 20px 20px 0;" onclick="window.print()">Print</button>
        <button type="reset" id="reset_button" style="margin: 0 20px 20px 0;">Reset Form</button>
        <button type="close" id="cancel_button" style="margin: 0 20px 20px 0;">Discard</button>
    
    </div>
    <div style="width:20.7cm;  background-color: yellow; page-break-inside:auto;  ;" id="printPageDiv"> <!-- Start of DIV what will be printed -->
    <div style="position:relative;"> <!-- Header of Page with logo and Container No. -->
    <img src='../../images/id_print_logo.png' height="72px" width="182px">
    <label>Created:<input type="datetime-local" step="60" pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}" 
    id="create_time" name="create_time" readonly style="width:180px; text-align:center;" value="<?php echo date('Y-m-d\TH:i')?>"></input></label>
    
    <label style="font-size:15px;font_weight:bold;  margin-left: 20px">Container Number: 
        <input type="text" name="container_noS" id="container_noS" style="font-size:15px; font_weight:bold; text-align:center; width: 180px;" maxlength="16" required></input></label>
    </div>  
    <!-- IC Number with its Barcode  -->
    <div style="position:relative; margin-top:5px; height:2cm">
    <label style="float:right; font_weight:bold;width:250px; ">IC Number: <input required type="text" name="ic_numbS" id="ic_numbS" onchange="changeTest(this.form)" 
    maxlength="16" style="font-size:20px; font_weight:bold; text-align:center;"></input></label>
    <div id="insertBarcodeHere"></div>
    </div>  
<div class="row"></div> 
<table id="rcv_head_tmpl"> <!-- Start of header table -->
    <tr><th></th><th></th><th></th><th>Date: </th><th>Name: </th></tr>
    <tr><th>Client: </th><td><input type="text" name="customer_code"></input></td>
    <th>Unloading: </th><td><input type="date" name="unload_date"></td>
    <td><input type="text" name="unload_name"></td></tr>
    
    <tr><th>Date and Time: </th><td><input type="datetime-local" step="60" pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}"  
    name="date_and_time" required></input></td>
    
    <th>Sorting: </th><td><input type="date" name="sorting_date"></td>
    <td><input type="text" name="sorting_name"></td></tr>
    
    <tr><th>Gate: </th><td><input type="text" name="gate_numbe"></input></td>
    <th>Put away: </th><td><input type="date" name="putaway_date"></td>
    <td><input type="text" name="putaway_name"></td></tr>
    
    <tr><th>OLD RO: </th><td><input type="text" name="old_ro_numb"></input></td>
    <th>Confirmation: </th><td><input type="date" name="confirm_date"></td>
    <td><input type="text" name="confirm_name"></td></tr>
    
    <tr><th></th><td></td>
    <th>Counting pcs in box: </th><td><input type="date" name="in_box_date"></td>
    <td><input type="text" name="in_box_name"></td></tr>    

</table  > <!--end of header table -->
<table id="sku_details_list"  class="tablesorter" style=" border-spacing: 1px;"> <!-- Start of SKU list table -->

    <tr><th style="width: 3%;">ID: </th><th style="width: 8%;">Total Pallets: </th><th style="width: 8%;">Boxes on Pallet: </th><th style="width: 12%;">Old Location: </th>
    <th style="width: 20%;">SKU Code: </th><th style="width: 8%;">Expected Qtty: </th><th style="width: 8%;">Received Boxes: </th><th style="width: 12%;">Putaway Location: </th></tr>
    
    <tr><td>1</td><td><input type="text" name="pallets_qtty_1"></input></td>
                        <td><input type="text" name="boxes_on_pallet_1"></input></td>
                        <td id="return_oldLocation1"></td>
                        <td><input type="text" name="sku_code_input_1" onchange="showOldLocations(this.value,this)"></input></td>
                        <td><input type="text" name="expected_qtty_box_1"></input></td>
                        <td><input type="text" name="received_box_qtty_1"></input></td>
                        <td><input type="text" name="putaway_area_1"></input></td></tr>
        
    <tr><td>2</td><td><input type="text" name="pallets_qtty_2"></input></td>
                        <td><input type="text" name="boxes_on_pallet_2"></input></td>
                        <td id="return_oldLocation2"></td>
                        <td><input type="text" name="sku_code_input_2" onchange="showOldLocations(this.value,this)"></input></td>
                        <td><input type="text" name="expected_qtty_box_2"></input></td>
                        <td><input type="text" name="received_box_qtty_2"></input></td>
                        <td><input type="text" name="putaway_area_2"></input></td></tr>

</table> <!-- End of SKU list table -->
</div> <!-- div for page to be printed -->  
<button type="button" id="row_button">Add New Row</button>

</div>
  </form>

【讨论】：

谢谢，最后这看起来像我正在寻找的输出。以前当我使用那个 serializeArray() 时，我得到的是 [object Object] 而不是值。在控制台中，我看不到任何值，只有不同的选项。
[object Object] 是在对象上调用.toString() 的默认结果。当您尝试使用console.log("output: " + someObject) 或$('something').text(someObject) 之类的字符串连接对象时，也会自动发生这种情况。要检查对象，您应该始终使用 console.log(someObject) 或 console.log("info", someObject)。
我能再问你一件事吗？是否可以在将其发送到 PHP 之前将其作为多维数组？我想输入 container_noS, ic_numbS and date_and_time 的初始值 + 行数在函数开始时所做的，是什么将所有这些数据发送到 PHP 与 var countRow = $('#sku_details_list tr').length -3;
@michal 在这种情况下，我不确定您所说的“多维数组”是什么意思。您能否提供完整的结果，以便我可以尝试找出您想要实现的目标？您可以将想要的结果添加为对原始问题的编辑。

【解决方案2】：

如果你想单独序列化一些表行，你可以这样做：

// Helper function that serializes each input element 
// of a specified parent element.
var serialize = function(element) {
  return $(element).find(':input').get()
    .reduce(function(accu, field) {
      accu[field.name] = field.value;
      return accu;
    }, {});
};

var data = serialize('#rcv_head_tmpl'); // add base-table data
 
// add sub-table data as "rows"
data.rows = $("#sku_details_list") // find sub-table
  .find('tr:not(:first)') // get each row except the first (header)
  .get().map(serialize); // serialize each row

console.log(data);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="container-fluid" method="post" id="inboundList" enctype="application/x-www-form-urlencoded">
    <div id="no-print" style="margin-left:10%;">
        <button type="button" id="save_button" style="margin: 0 20px 20px 0;" onclick="returnArrayValues()">Save</button>
        <button type="button" id="print_button" style="margin: 0 20px 20px 0;" onclick="window.print()">Print</button>
        <button type="reset" id="reset_button" style="margin: 0 20px 20px 0;">Reset Form</button>
        <button type="close" id="cancel_button" style="margin: 0 20px 20px 0;">Discard</button>
    
    </div>
    <div style="width:20.7cm;  background-color: yellow; page-break-inside:auto;  ;" id="printPageDiv"> <!-- Start of DIV what will be printed -->
    <div style="position:relative;"> <!-- Header of Page with logo and Container No. -->
    <img src='../../images/id_print_logo.png' height="72px" width="182px">
    <label>Created:<input type="datetime-local" step="60" pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}" 
    id="create_time" name="create_time" readonly style="width:180px; text-align:center;" value="<?php echo date('Y-m-d\TH:i')?>"></input></label>
    
    <label style="font-size:15px;font_weight:bold;  margin-left: 20px">Container Number: 
        <input type="text" name="container_noS" id="container_noS" style="font-size:15px; font_weight:bold; text-align:center; width: 180px;" maxlength="16" required></input></label>
    </div>  
    <!-- IC Number with its Barcode  -->
    <div style="position:relative; margin-top:5px; height:2cm">
    <label style="float:right; font_weight:bold;width:250px; ">IC Number: <input required type="text" name="ic_numbS" id="ic_numbS" onchange="changeTest(this.form)" 
    maxlength="16" style="font-size:20px; font_weight:bold; text-align:center;"></input></label>
    <div id="insertBarcodeHere"></div>
    </div>  
<div class="row"></div> 
<table id="rcv_head_tmpl"> <!-- Start of header table -->
    <tr><th></th><th></th><th></th><th>Date: </th><th>Name: </th></tr>
    <tr><th>Client: </th><td><input type="text" name="customer_code"></input></td>
    <th>Unloading: </th><td><input type="date" name="unload_date"></td>
    <td><input type="text" name="unload_name"></td></tr>
    
    <tr><th>Date and Time: </th><td><input type="datetime-local" step="60" pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}"  
    name="date_and_time" required></input></td>
    
    <th>Sorting: </th><td><input type="date" name="sorting_date"></td>
    <td><input type="text" name="sorting_name"></td></tr>
    
    <tr><th>Gate: </th><td><input type="text" name="gate_numbe"></input></td>
    <th>Put away: </th><td><input type="date" name="putaway_date"></td>
    <td><input type="text" name="putaway_name"></td></tr>
    
    <tr><th>OLD RO: </th><td><input type="text" name="old_ro_numb"></input></td>
    <th>Confirmation: </th><td><input type="date" name="confirm_date"></td>
    <td><input type="text" name="confirm_name"></td></tr>
    
    <tr><th></th><td></td>
    <th>Counting pcs in box: </th><td><input type="date" name="in_box_date"></td>
    <td><input type="text" name="in_box_name"></td></tr>    

</table  > <!--end of header table -->
<table id="sku_details_list"  class="tablesorter" style=" border-spacing: 1px;"> <!-- Start of SKU list table -->

    <tr><th style="width: 3%;">ID: </th><th style="width: 8%;">Total Pallets: </th><th style="width: 8%;">Boxes on Pallet: </th><th style="width: 12%;">Old Location: </th>
    <th style="width: 20%;">SKU Code: </th><th style="width: 8%;">Expected Qtty: </th><th style="width: 8%;">Received Boxes: </th><th style="width: 12%;">Putaway Location: </th></tr>
    
    <tr><td>1</td><td><input type="text" name="pallets_qtty_1"></input></td>
                        <td><input type="text" name="boxes_on_pallet_1"></input></td>
                        <td id="return_oldLocation1"></td>
                        <td><input type="text" name="sku_code_input_1" onchange="showOldLocations(this.value,this)"></input></td>
                        <td><input type="text" name="expected_qtty_box_1"></input></td>
                        <td><input type="text" name="received_box_qtty_1"></input></td>
                        <td><input type="text" name="putaway_area_1"></input></td></tr>
        
    <tr><td>2</td><td><input type="text" name="pallets_qtty_2"></input></td>
                        <td><input type="text" name="boxes_on_pallet_2"></input></td>
                        <td id="return_oldLocation2"></td>
                        <td><input type="text" name="sku_code_input_2" onchange="showOldLocations(this.value,this)"></input></td>
                        <td><input type="text" name="expected_qtty_box_2"></input></td>
                        <td><input type="text" name="received_box_qtty_2"></input></td>
                        <td><input type="text" name="putaway_area_2"></input></td></tr>

</table> <!-- End of SKU list table -->
</div> <!-- div for page to be printed -->  
<button type="button" id="row_button">Add New Row</button>

</div>
  </form>

我认为如果您将每个部分放入其自己的form 元素中会更容易。然后你可以在每个form 元素上使用serializeArray，最后合并结果。

【讨论】：