Как разместить json ajax?

Question

Я хотел бы отправить массив, закодированный в JSON, с использованием ajax, но в моем коде ниже приводятся некоторые ошибки.

HTML

<table width="200" border="1"> 
     <tr> 
     <td>table</td> 
     <td> 
      <input name="table[]" type="text" id="table[]" value="5" /> 
    </td> 
     </tr> 
     <tr> 
     <td>menu</td> 
     <td><input name="menu[]" type="text" id="menu[]" value="noodle" /></td> 
     </tr> 
     <tr> 
     <td>number</td> 
     <td><input name="number[]" type="text" id="number[]" value="1" /></td> 
     </tr> 
     <tr> 
     <td>note</td> 
     <td><input name="note[]" type="text" id="note[]" value="no " /></td> 
     </tr> 
     <tr> 
     <td>table</td> 
     <td><input name="table[]" type="text" id="table[]" value="1" /></td> 
     </tr> 
     <tr> 
     <td>menu</td> 
     <td><input name="menu[]" type="text" id="menu[]" value="beer" /></td> 
     </tr> 
     <tr> 
     <td>number</td> 
     <td><input name="number[]" type="text" id="number[]" value="2" /></td> 
     </tr> 
     <tr> 
     <td>note</td> 
     <td><input name="note[]" type="text" id="note[]" value="-" /></td> 
     </tr> 
    </table> 
<button id="save-menu">save</button> 
<button id="calculator">calculator</button> 

JQuery: Если я нажимаю кнопку save-menu посылает некоторые данные в меню/заказа. Также, когда я нажимаю кнопку calculator, он отправляет некоторые данные на страницу калькулятора. Проблема в том, что когда я пытаюсь отправить данные с помощью jQuery, он не отправляет все данные в массиве.

<script> 
$(document).ready(function(){ 
    $('#save-menu').click(function() { 

      $.post('menu/order', {  
       table : $('select#workplace-table').val(), 
       'mid[]' : $('input#order-mid').val(), 
       'number[]' : $('input#order-number').val(), 
       'note[]' : $('input#order-note').val(), 
       }); 


     $('#calculator').click(function() { 

      $.post('menu/calculator, {  
       table : $('select#workplace-table').val(), 
       'mid[]' : $('input#order-mid').val(), 
       'number[]' : $('input#order-number').val(), 
       }); 


      }); 
</script> 

Answer 1

JSFiddle 0 0 0 0 как есть.

Ваш селектор $ («вход # Номер заказа») ищет одного входа

<input id="order-number"> 

В вашем HTML вы не должны использовать тот же идентификатор несколько раз и в то время как она действует, чтобы использовать то же имя для всех входов и JQuery выберет его правильно, некоторые библиотеки могут не работать. (См это question.) Я бы рекомендовал использовать имя класса для обработки выбора, как это:

<form> 
    <input type="text" class="number" value="1" /> 
    <input type="text" class="number" value="2" /> 
    <input type="text" class="number" value="3" /> 
    <input type="text" class="number" value="4" /> 
    <input type="text" class="number" value="5" /> 
</form> 

В вашем JS

'number[]' : $('input#order-number').val() 

добавит «номер []» а имена свойств для вашего JSON объект, но я подозреваю, что вы действительно хотите, чтобы быть массивом, как это:

"numbers" : [ 1, 2 ] 

Кроме того, стандарт JSON требует двойных кавычек. См. Это question.

В JS вам нужно будет получить все элементы и добавить их значения в массив.

var numbers = []; 
$('.number').each(function(idx,el){ 
    numbers.push($(el).val()); 
}); 

var jsonObj = { 
    "numbers" : numbers 
}; 

Обновление кода для использования классов для выбора и создания массивов, как выше, должны дать вам правильный объект JSON, который вы хотите POST.