如何通過post，ajax，php，jquery從FORM獲取多維數組？

Question

請幫我修改代碼。我需要從ajax這樣的陣列：car1 [汽車的顏色] ['關於汽車的故事']。 但我只能得到：car1 ['關於汽車的故事']。 我已經閱讀了很多技巧，但沒有成功。我是php的begginer。 非常感謝具體的答案:)下面的腳本

// HTML smaller version 
<form class= "ajax2" action="formInsertCar.php" method="POST"> 
    <input type="submit" value="Save All"> 
    <div> 
     <select name="car1[]" size="1"> 
      <?php $opt = new CarOptions;?> 
     </select> 
     <textarea name="car1[]"></textarea> 
    </div> 
    <div> 
     <select name="car2[]" size="1"> 
      <?php $opt = new CarOptions;?> 
     </select> 
     <textarea name="car2[]"></textarea> 
    </div> 
</form> 

// JavaScript, ajax for FORM 
$('form.ajax2').on('submit', function() { 
    var that = $(this), 
    url = that.attr('action'), 
    type = that.attr('method'), 
    data = {}; 

    that.find('[name]').each(function(index, value) { 
     var that = $(this), 
     name = that.attr('name'), 
     value = that.val(); 

     data[name] = value; 
     // here I want to result like: car1['color of car']['story about car']; 
     // but I can get only: car1['story about car'] 
    }); 

    $.ajax({ 
     url: url, 
     type: type, 
     data: data, 
     success: function(response) { 
      $('.success').html(response); 
     } 
    }); 
    return false; 
}); 

Answer 1

我敢肯定，你會得到這是一種不必要的格式。 我不喜歡它：

<div> 
    <select name="car[1][color]" size="1"> 
     <?php $opt = new CarOptions;?> 
    </select> 
    <textarea name="car[1][history]"></textarea> 
</div> 
<div> 
    <select name="car[2][color]" size="1"> 
     <?php $opt = new CarOptions;?> 
    </select> 
    <textarea name="car[2][history]"></textarea> 
</div> 

我也會改變一些你的JavaScript形式提交監聽器：

$('form.ajax2').on('submit', function(e) { 
    e.preventDefault(); //'return false' is deprecated according to jQuery documentation, use this instead. 

    var that = $(this), 
    url = that.attr('action'), 
    type = that.attr('method'), 
    data = that.serialize(); //This will capture all form input values, no need to reinvent the wheel 

    $.ajax({ 
     url: url, 
     type: type, 
     data: data, 
     success: function(response) { 
      $('.success').html(response); 
     } 
    }); 
}); 

在服務器端（PHP）：

print_r($_POST) 

/** 
Will print the following data: 

array() { 
    car => array() { 
     1 => array() { 
      color => colorValue, 
      history => historyValue 
     }, 
     2 => array() { 
      color => colorValue, 
      history => historyValue 
     } 
    } 
} 
*/ 

Answer 2

嘗試..........使用jQuery的類FORMDATA

$('form.ajax2').on('submit', function(e) { 
    e.preventDefault(); 
    url = that.attr('action'), 
    type = that.attr('method'); 

    $.ajax({ 
     url: url, 
     type: type, 
     data: new FormData(this), 
     contentType: false, 
     cache: false, 
     processData: false, 
     success: function(response) { 
      $('.success').html(response); 
     } 
    }); 
    return false; 
});