[解決済み] ボタンが2つあるフォームから、ボタンクリック時にAjaxリクエストを送信するにはどうしたらいいですか？

質問内容

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');
      }
    });
  });
});

このコードを改良して、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');
        }
    });
});