0

我想使用 ajax 发送一个以 JSON 编码的数组，但我的代码下面会产生一些错误。

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>
4

1 回答 1

0

这是我认为您想要的JSFiddle 。

您的选择器 $('input#order-number') 正在寻找单个输入

<input id="order-number">

在您的 HTML 中，您不应多次使用相同的 id，虽然对所有输入使用相同的名称是有效的，并且 JQuery 会正确选择它，但某些库可能不会。（请参阅这个问题。）我建议使用类名来处理这样的选择：

<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 标准需要双引号。看到这个问题。

在 JS 中，您需要获取所有元素并将它们的值添加到数组中。

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

var jsonObj = {
    "numbers" : numbers
};

更新代码以使用类进行选择并创建像上面这样的数组应该为您提供要发布的正确 JSON 对象。

于 2013-11-07T19:59:23.860 回答