jQuery：ajax，提交被点击的按钮答案

【问题标题】：jQuery: ajax, submit button that was clickedjQuery：ajax，提交被点击的按钮
【发布时间】：2015-03-08 17:37:20
【问题描述】：

我有一个包含多个元素和两个提交按钮的表单：保存和删除。通过 jQuery ajax 提交表单时，我需要知道用户是否单击了 DELETE，以便我可以相应地执行代码。问题是 jQuery 不发送提交名称和值。因此，我在这里阅读并找到了理想的解决方法：使用 SAVE 输入和 DELETE 按钮。使用删除按钮，我可以发送带有按钮名称和值的表单，因此执行删除代码。问题是我试图将这些部分联系在一起但没有成功。这是我的代码：

HTML：

<form id="f-release" method="post" action="includes/submit_release.php">
    <fieldset>
        <input name="save" type="submit" value="save">
        <button name="delete" type="button" value="delete" onClick="return confirm('Do you really wish to permanently delete the record?')">Delete</button>
    </fieldset>
</form>

ajax：

$("form button[name=delete]").click(function() {
    var formData = $(this).closest('form').serializeArray();
    formData.push({name: this.name, value:this.value });
});

$('form#f-release').submit(function(event) {
    event.preventDefault();

    var form = $(this);

    $.ajax({
        type: form.attr('method'),
        url: form.attr('action'),
        data: form.serialize(),
        dataType: "json"
    }).done(function(data) {

        alert('done');  

    }).fail(function(data) {

        alert('error!');

    });
});

php:

if (isset($_POST['releaseid']) && is_numeric($_POST['releaseid'])) {

    // save

} elseif (...delete...) {

    //delete

}

当我点击删除时，如何提交带有删除按钮名称和值的表单，以便正确执行 php DELETE 代码？

【问题讨论】：

使用数据属性？
你能说清楚吗？

标签： jquery ajax

【解决方案1】：

您可以考虑一些选项：

通常你不使用 POST 方法来删除记录，而应该使用 DELETE 方法。然后在你的 php 代码中，根据 http 方法决定服务应该做什么。（我对php不熟悉但我相信是可以的，看这个帖子Detecting request type in PHP (GET, POST, PUT or DELETE)）
如果你真的必须使用POST方法进行删除，那么你可以有一个隐藏的输入：

然后当用户单击删除按钮时，将其值设置为“删除”，当用户单击提交按钮时，将其值设置为“提交”（或保持不变，因为我将其默认值设置为“提交”）。这样做应该让您的 php 代码能够根据 $_POST['method']

决定操作

【讨论】：

我不知道 PHP 中存在 DELETE 方法。这简化了很多事情。谢谢

【解决方案2】：

您可以将删除和提交保留为输入或按钮，这并没有什么区别。但它们可以是相同的元素。

有几种方法可以解决这个问题：

** 为 delete 和 submit 元素创建 ID。

** 然后创建一个内联点击处理程序，如下所示：

<button id="save" onClick="reply_click(this.id)">Save</button>
<button id="delete" onClick="reply_click(this.id)">Delete</button>

<script type="text/javascript">
function reply_click(clicked_id)
{
    // whatever code here...
    // clicked_id will refer to the ID that was clicked
    console.log(clicked_id); // try this
}
</script>

或者，如果您更喜欢采用一种分离关注点的更简洁的方法，并且不处理 HTML 中的行为，您可以尝试以下方法：

** 为 delete 和 submit 元素创建 ID。

** 然后遍历每个匹配的元素并附加一个事件处理程序，该处理程序将在单击时返回特定 ID。看起来像这样：

var element = document.querySelectorAll('button');
            var elementLength = element.length;
            for(var i = 0; i < elementLength; i++){
                element[i].addEventListener('click', function(){
                    console.log(this.id);
                });
            }

如果你想坚持使用 jQuery：

** 为 delete 和 submit 元素创建 ID。

** 那么你可以这样做：

$('button').click( function (event) {
    var currentId = event.target.id;
    // do stuff with currentId
 });

[注意：此答案解决了您的点击事件来自何处的检测，但不是专门针对您的 AJAX 调用的工作原理。我知道这解决了您的问题。]

【讨论】：