提交按钮的发布值

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

根据.serialize()的jQuery文档 ...

仅“ 成功的控件 ”被序列化为字符串。 由于没有使用按钮提交表单，因此没有序列化提交按钮的值 。

换句话说，当使用.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(),
    });
});

请注意，我使用的是button的click事件，而不是form的submit事件，以便可以轻松捕获使用了哪个按钮。

演示： http : //jsfiddle.net/ty7c5k9b/