提交按钮的发布值答案

【问题标题】：Post value of submit button提交按钮的发布值
【发布时间】：2014-11-05 22:00:26
【问题描述】：

我有一个<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" /> 没有运气。

【问题讨论】：

标签： javascript jquery html ajax serialization

【解决方案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(),
    });
});

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

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

【讨论】：