如何使用jQuery的ajax数组发布JSON？

Question

i want to send array in ajax json post ,but some code are error.how to fig this code?

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 : if I click button save-menu it send some data to menu/order or I click button calculator it send some data to calculator page. But not my jquery code not send all value in array ,how to fig this code? Help me please.Thank you.

        <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

Don't use if(clickHandler) style syntax, that will never trigger when you want it to, instead just define the click handler:

$('#save-menu').click(function() {
    //do stuff on save-menu click
})

Answer 2

It's the way you have the click events set up that are causing you your problems. It should look more like this:

$('#save-menu').click(function() {
  $.post(... ajax stuff...);
});

Answer 3

Bind an event handler to the "click" JavaScript event, or trigger that event on an element.

$( "#save-menu" ).click(function() {
   //Handler for .click() called. 
   $.post('menu/order',{...});
});

$( "#calculator" ).click(function() {
   //Handler for .click() called. 
   $.post('menu/calculator',{...});
});