如何从带有 2 个按钮的表单单击按钮时发送 Ajax 请求？

Question

我想从一个有 2 个按钮的表单将请求从一个页面发送到另一个页面：

 <form method="post">
    <button id="button_1" value="val_1" name="but1">button 1</button>
    <button id="button_2" value="val_2" name="but2">button 2</button>
    <input id="access_token" type="hidden" name="access_token" value="<?php echo $_SESSION['access_token']; ?>" />
</form>

 $(document).ready(function() {
  $("#button_1").click(function(e) {
    e.preventDefault();
    $.ajax({
      type: "POST",
      url: "/pages/test/",
      data: {
        id: $("#button_1").val(),
        access_token: $("#access_token").val()
      },
      success: function(result) {
        alert('ok');
      },
      error: function(result) {
        alert('error');
      }
    });
  });

  $("#button_2").click(function(e) {
    e.preventDefault();
    $.ajax({
      type: "POST",
      url: "/pages/test/",
      data: {
        id: $("#button_2").val(),
        access_token: $("#access_token").val()
      },
      success: function(result) {
        alert('ok');
      },
      error: function(result) {
        alert('error');
      }
    });
  });
});

如何改进此代码并将其合并到一个函数中？

原文由 Max Maxymenko 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

鉴于处理程序之间的唯一逻辑区别是单击按钮的值，您可以使用 this 关键字来引用引发事件的元素并从中获取 val() .尝试这个：

 $("button").click(function(e) {
    e.preventDefault();
    $.ajax({
        type: "POST",
        url: "/pages/test/",
        data: {
            id: $(this).val(), // < note use of 'this' here
            access_token: $("#access_token").val()
        },
        success: function(result) {
            alert('ok');
        },
        error: function(result) {
            alert('error');
        }
    });
});

原文由 Rory McCrossan 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

如果两个函数之间的唯一区别是被触发的按钮的值，请使用 jQuery 多选器。

 $("#button_1, #button_2").on("click", function(e) {
    e.preventDefault();
    $.ajax({type: "POST",
        url: "/pages/test/",
        data: { id: $(this).val(), access_token: $("#access_token").val() },
        success:function(result) {
          alert('ok');
        },
        error:function(result) {
          alert('error');
        }
    });
});

原文由 Aung Myo Linn 发布，翻译遵循 CC BY-SA 3.0 许可协议