jQuery $.post 不传递按下的按钮

Question

最近我遇到了一个问题，即 $.post 不发送有关按下的按钮的信息。 即我们有一个带有两个按钮的表单。

<form method="post"  action="/home/index">

  <input type='hidden' name='data1' value='value1' />

  <button name="button1" type="submit">First</button>
  <button name="button2" type="submit">Second</button>

</form>

$(document).ready(function() {
    $('#formId').submit(function () {
        var f = $(this);
        var action = f.attr("action");
        var serf = f.serialize();
        $.post(action, serf,
        //onreturn
          function (data) {
                //do something here on success
              },
              'json'
          );
        return false;
      });
});

如果用户按下第一个按钮，没有 ajax 的表单将按如下方式发布：data1=value1&button1

但是当我使用 $.post 发布的表单时，不包含有关按钮的任何信息：data1=value1 strong>

jQuery 1.6.1

行为取决于按下的按钮。 任何帮助或解决方法将不胜感激！

Answer 1

由于您要停止浏览器的默认行为（即提供按钮值的行为），因此您必须捕获按下的按钮，并将该信息添加到您发布的数据中（您的 serf数据）。也许最可靠的方法是挂钩按钮上的 click 事件以及表单的 submit 事件，并将它们全部路由到执行以下操作的中央函数：使用（或不使用）按钮值的 ajax 提交（在以另一种方式提交表单的情况下，不使用按钮值，而不是按其中一个按钮）。

沿着这些思路：

$(document).ready(function() {
    function submitTheForm(f, button) {
        var action = f.attr("action");
        var serf = f.serialize();
        if (button && button.name) {
            serf += "&" + encodeURIComponent(button.name);
            if (button.value) {
                serf += "=" + encodeURIComponent(button.value);
            }
        }
        $.post(action, serf,
        //onreturn
          function (data) {
                //do something here on success
          },
          'json'
        );
    }
    $('#formId').submit(function () {
        submitTheForm($(this));
        return false;
    });
    $("#formId :submit").click(function() {
        submitTheForm($(this).closest('form'), this);
        return false;
    });
});

Answer 2

我认为这不会发生。但无论如何，你也可以做这样的事情。

$("#formid").children("input[type="submit"]").click(function() {
    var name = $(this).attr("name");
    post(name);
    return false;
});
function post(buttnname) {
    var action = $("#formid").attr("action");
    var serf = $("#formid").serialize()+"&button="+buttname;
    $.post(action, serf,
    //onreturn
        function (data) {
            //do something here on success
          },
          'json'
        );
}