-1

jQuery を使用して、AJAX を使用して JSON および HTML コードを投稿したいと考えています。入力配列を使用します。

私の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">menu</button>
<button id="cal">cal</button>

Jクエリ。jQuery コードを作成しましたが、配列内のすべての値を送信しません。

$('#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(),
    });
});

$('#cal').click(function () {
    $.post('cal', {
        'table': $('select#workplace-table').val(),
        'mid[]': $('input#order-mid').val(),
        'number[]': $('input#order-number').val(),
    });
});

この jQuery コードを修正するにはどうすればよいですか?

4

2 に答える 2

0

ブロ!! とてもシンプルです。テーブルをフォーム内にラップする必要があり、すばらしい jQuery ですべてがうまくいきます。

以下の作業コードを確認できます。

HTML および jQuery コード:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'></script>
<script type="text/javascript">    
$(function () {
    $('#form').submit(function () {
        console.log($('#form').serializeArray());       
            $.post('ajaxtest.php', $('#form').serializeArray(), function(d){
                console.log(d);
            }); 
        return false;
    });
});
</script>
<title>Form</title>
</head>
<body>
<form name="myForm" method="post"  id='form'>
    <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>    
<input type="submit" value="Submit">
</form>
</body>
</html>

JSON データの送信:

[
Object { name="table[]", value="5"}, 
Object { name="menu[]", value="noodle"}, 
Object { name="number[]", value="1"}, 
Object { name="note[]", value="no "}, 
Object { name="table[]", value="1"}, 
Object { name="menu[]", value="beer"}, 
Object { name="number[]", value="2"}, 
Object { name="note[]", value="-"}
]

Ajax 応答データ:

Array
(
    [table] => Array
        (
            [0] => 5
            [1] => 1
        )

    [menu] => Array
        (
            [0] => noodle
            [1] => beer
        )

    [number] => Array
        (
            [0] => 1
            [1] => 2
        )

    [note] => Array
        (
            [0] => no 
            [1] => -
        )

)

ajaxtest.php コード:

print_r($_POST);
于 2013-11-07T10:58:53.417 に答える
0

フォームの間にタブを取り、それをシリアル化します

参照

serializeArray => http://api.jquery.com/serializeArray/

シリアル化 => http://api.jquery.com/serialize/

于 2013-11-07T10:46:23.130 に答える