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

Posted

技术标签:

【中文标题】如何从带有 2 个按钮的表单单击按钮时发送 Ajax 请求?【英文标题】:How can I send an Ajax Request on button click from a form with 2 buttons? 【发布时间】:2016-05-14 04:23:25 【问题描述】:

我想从一个有 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');
        
    );
);

【讨论】:

是的,谢谢我是 *** 的新手——目前正在努力解决问题! :) 这行得通。但我试图从我返回的 json 数据中挑选出name,但我得到了未定义。我这样映射alert(result.name) 答案完全取决于 JSON 的结构。我建议为它提出一个新问题【参考方案2】:

如果两个函数之间的唯一区别是被触发按钮的值,请使用jQuery multiple-selector。

$("#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');
        
    );
);

【讨论】:

谢谢,试一试! :)【参考方案3】:
function sendAjaxRequest(element,urlToSend) 
             var clickedButton = element;
              $.ajax(type: "POST",
                  url: urlToSend,
                  data:  id: clickedButton.val(), access_token: $("#access_token").val() ,
                  success:function(result)
                    alert('ok');
                  ,
                 error:function(result)
                  
                  alert('error');
                 
             );
     

       $(document).ready(function()
          $("#button_1").click(function(e)
              e.preventDefault();
              sendAjaxRequest($(this),'/pages/test/');
          );

          $("#button_2").click(function(e)
              e.preventDefault();
              sendAjaxRequest($(this),'/pages/test/');
          );
        );
    创建为用于发送 ajax 请求的单独函数。 将第二个参数保留为 URL,因为将来您希望将数据发送到不同的 URL

【讨论】:

以上是关于如何从带有 2 个按钮的表单单击按钮时发送 Ajax 请求?的主要内容,如果未能解决你的问题,请参考以下文章

PHP:从表单中获取电子邮件并在单击按钮时发送它

表单发布时发送提交按钮的值

单击带有形式动作的按钮时停止链接转发

单击 Paypal 按钮后的电子邮件表单

如何通过包含表单数据但不单击提交按钮的 ajax 将视图模型发送到控制器

如何告诉我的 NodeJS 服务器在带有两个按钮的 HTTP 表单中单击了哪个按钮?