將數組形式轉換成使用jQuery進行AJAX調用的對象

Question

我的html中有一個表單元素。在表單中我有輸入元素。其中一個輸入元素應該是一個數組。我想發送一個如下所示的對象。

obj = { 
    input1: "blah", 
    input2: "blah2, 
    input3: [{ 
    a: 'abc', 
    b: 'def', 
    c: 'hig' 
    },{ 
    a: 'cba', 
    b: 'fed', 
    c: 'gih' 
    }], 
    input4: "blah5" 
} 

我試過用這個作爲我的提交，但我不知道如何正確地序列化這個來創建一個像上面那樣的對象。

$('form').on('submit', function(event){ 
    event.preventDefault(); 
    var obj = $(this).serialize(); 
    $.ajax({ 
     method: "POST", 
     url: "http://localhost/form", 
     data: obj 
    ... 

這是我的HTML（修改爲隱藏信息）我也硬編碼在這個例子中的元素。實時它們將是動態的，則用戶將能夠添加或經由jQuery函數刪除元素

<form id="thisFormThing"> 
<ul role="tablist" class="nav nav-tabs"> 
    <li role="presentation" class=""><a href="#globalAttributes" aria-controls="globalAttributes" role="tab" data-toggle="tab" aria-expanded="false">Global Attributes</a></li> 
    <li role="presentation" class="active"><a href="#inputs" aria-controls="inputs" role="tab" data-toggle="tab" aria-expanded="true">Inputs</a></li> 
</ul> 
<div class="tab-content"> 
    <div id="globalAttributes" role="tabpanel" style="padding-top: 20px" class="tab-pane"> 
     <div class="clearfix"> 
      <div class="form-group"><label for="input1" class="col-sm-2 control-label">Input1:</label> 
       <div class="col-md-1"><input type="text" name="input1" id="input1" class="form-control"></div> 
      </div> 
     </div> 
     <div class="clearfix"> 
      <div class="form-group"><label for="input2" class="col-sm-2 control-label">Input2:</label> 
       <div class="col-sm-3"><select class="form-control"><option value="1">blah2</option><option value="2">blah3</option><option value="3">blah4</option> 
      </div> 
     </div> 
    </div> 
    <div id="hosts" role="tabpanel" style="padding-top: 20px" class="tab-pane active"> 
     <table id="dataTable" class="table table-hover table-condensed"> 
      <thead> 
       <tr> 
        <th>a</th> 
        <th>b</th> 
        <th>c</th> 
       </tr> 
      </thead> 
      <tbody id="dataBody"> 
       <tr id="0"> 
        <td><input type="text" name="a" class="form-control"></td> 
        <td><input type="text" name="b" class="form-control input-sm"></td> 
        <td><input type="text" name="c" class="form-control"></td> 
       </tr> 
       <tr id="1"> 
        <td><input type="text" name="a" class="form-control"></td> 
        <td><input type="text" name="b" class="form-control input-sm"></td> 
        <td><input type="text" name="c" class="form-control"></td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
    <div class="clearfix"> 
     <div class="form-actions"><input type="submit" name="commit" value="submit" class="btn btn-primary"></div> 
    </div> 
</div> 

Answer 1

一種可能的解決方案是使用而不是輸入一個textarea（更多舒適打字）和解析它爲逗號分隔字符串：

// Assuming the string the user types is "asd, asd2, asd3" 
// Trim it before splitting to remove whitespaces 
string.trim().split(','); // Outputs ["asd", "asd2", "asd3"] 

你可以告訴用戶什麼語法是預期的，所以你知道如何解析結果字符串。

注意事項：

• 您可能還需要之前拆分修剪換行和所有空格。這個答案在stackOverflow中。
• 要做多個對象，您可以使用多個輸入或定義允許用戶定義字符串中的對象的語法，然後從大到小結構多次解析它。