使用jQuery查找在AJAX提交中被点击的按钮

Question

我有一个带有两个按钮的表单，分别是确认和删除。我正在发布一个隐藏的输入元素ID。当点击“确认”时，将使用该元素ID执行操作。如果点击“删除”，则会删除具有该元素ID的DB中的条目。现在，问题是当我执行print_r($_POST); exit();时，它正确地给出了输入元素ID。但它并没有告诉我哪个按钮被点击了。有没有办法在单个表单中找出确切点击的按钮？这两个按钮都需要存在于同一个表单中。

以下是我尝试过的代码：

jQuery

    var dataString = $('#form_confirm_delete').serialize();

    $.ajax({

              type: "POST",
              url: "ajaxpage.php",
              data: dataString,
              dataType: 'json',
              cache: false,       
              success: (function(response) 
                {
                    alert('Yes');
                })

         });

PHP页面（ajaxpage.php）：

<?php print_r($_POST); exit(); ?>

- Devner

Answer 1

您可以在被点击的按钮上添加一个隐藏的输入框。

当您的两个按钮之一被点击时，

获取被点击按钮的值，例如“删除”。

<button id="deleteButton" value="delete">Delete</button>

并将所点击按钮的值存储在变量中，例如

$("#deleteButton").click(function(){
  var thebuttonclicked =$(this).attr("value");

然后设置隐藏字段的值

$('input[name=theclicked]').val(thebuttonclicked);

提交后，您可以通过名称“theclicked”获取帖子。我认为即使提交了http://www.w3.org/TR/html401/interact/forms.html#h-17.13.2按钮，这种方法仍然更好，因为jquery序列化不包括被点击的按钮。有关序列化的更多信息，请参阅http://api.jquery.com/serialize/

- Gandalf

---

+1 这也是我尝试做的另一种方式。我的要求是不添加任何更多的输入元素，并避免编写更多的代码来填充数据。所以我必须选择 @jhonraymos 的解决方案。但我相信，在允许向表单添加新元素的情况下，您的解决方案也可以使用。感谢您发布这个替代方案。 - Devner

Answer 2

你可以使用类似以下的内容

url: "ajaxpage.php?button="+id,

$("#BUTTON1").click(function(){
var url="ajaxpage.php?button="+this.id,
"
})

在服务器端，您可以获取该变量，或者您可以使用POST变量。

var id=this.id;
$.ajax({

              type: "POST",
              url: "ajaxpage.php",
              data:{"dataString": dataString,"id":id},
              dataType: 'json',
              cache: false,       
              success: (function(response) 
                {
                    alert('Yes');
                })
           // you can use this variable id server-side     
         });

- StaticVariable

---

这个解决方案似乎是我尝试过的最简单、最容易的方法，只需添加少量新代码即可。我完全忘记了我们可以捕获所点击按钮的ID并通过dataString发送它。非常感谢您的解决方案，它运行得非常好！ - Devner

Answer 3

您可以监听两个按钮的操作：

$( '#delete_button' ).click(function(){
     submitForm( 'delete' );
}); 

$( '#submit_button' ).click(function(){
     submitForm( 'submit' );
}); 

然后在一个函数中传递您的参数：

function submitForm( type ){

    var dataString = $('#form_confirm_delete').serialize();
    dataString += "&type=" + type; 
    $.ajax({

          type: "POST",
          url: "ajaxpage.php",
          data: dataString,
          dataType: 'json',
          cache: false,       
          success: (function(response) 
            {
                alert('Yes');
            })

     });
}

- Stefano Ortisi

---

+1 那将是一种很好的替代方式来完成我所尝试的任务。只希望尽可能少地编辑代码，所以我必须选择@jhonraymos的解决方案。感谢您发布这个备选方案。 - Devner