Question

我想使用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>

Jquery的。我编写了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代码？

Answer 1

在表单之间显示并将其序列化

参考

serializeArray =＆gt; http://api.jquery.com/serializeArray/

serialize =＆gt; http://api.jquery.com/serialize/

Answer 2

兄弟!!这很简单。你需要把你的表包装在一个表单中，并且所有东西都很棒，有很棒的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);

使用jQuery AJAX发布JSON？

2 个答案: