Question

我有<form>：

<form method="post" action="">
    <button type="submit" name="age" value="20">Age 20</button>
    <button type="submit" name="age" value="30">Age 30</button>
</form>

当我使用这样的ajax处理此<form>的提交时：

$('form').submit(function (event) {
    event.preventDefault();
    $.ajax({
        type     : "POST",
        cache    : false,
        url      : $(this).attr('action'),
        data     : $(this).serialize(),
    });
});

它完全忽略了POST['age']。这是预期的行为，还是我做错了什么？

我还没试过<input type="submit" name="age" value="30" />。

Answer 1

As per the jQuery documentation for .serialize() ...

仅将“successful controls”序列化为字符串。没有提交按钮值被序列化，因为表单未使用按钮提交 。

换句话说，当使用.ajax()提交表单时，按钮值不会成为POST数组的一部分。但是，常规的“非ajax”提交将包括POST数组中的单击按钮。

解决方法是简单地将按钮的值附加到序列化数组...

$('button').on('click', function (event) {
    event.preventDefault();
    $.ajax({
        type     : "POST",
        cache    : false,
        url      : $(this).parent('form').attr('action'),
        data     : $(this).parent('form').serialize() + '&' + $(this).attr('name') + '=' + $(this).val(),
    });
});

请注意，我正在使用click的{{1}}事件，而不是button的{{1}}事件，因此我可以轻松捕获哪个按钮使用

DEMO：http://jsfiddle.net/ty7c5k9b/

发布提交按钮的值

1 个答案: