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()

プロパティ名「number[]」をJSONオブジェクトに追加しますが、実際には次のような配列にしたいのではないかと思います：

"numbers" : [ 1, 2 ]

また、JSON 標準では二重引用符が必要です。この質問を参照してください。

JS では、すべての要素を取得し、それらの値を配列に追加する必要があります。

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

var jsonObj = {
    "numbers" : numbers
};

選択にクラスを使用するようにコードを更新し、上記のように配列を作成すると、POST する正しい JSON オブジェクトが得られます。

于 2013-11-07T19:59:23.860 に答える