jQuery：ajax，点击提交按钮

我有一个表单有几个元素和两个提交按钮：保存和删除。当通过jQuery ajax提交表单时，我需要知道用户是否单击了DELETE，以便我可以相应地执行代码。问题是，jQuery不会发送提交名称和值。因此，我在这里阅读并发现它看起来像是理想的解决方法：使用输入SAVE和DELETE按钮。使用DELETE按钮，我可以发送带有按钮名称和值的表单，因此执行删除的代码。问题是，即时通讯试图绑在一起，没有成功。这里是我的代码：jQuery：ajax，点击提交按钮

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代码？

来源

2015-03-08 Marco

使用数据属性？ – a7omiton 2015-03-08 17:50:32

你能说清楚吗？ – Marco 2015-03-08 18:01:37

有一些选项可以考虑：

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

<输入类型=“隐藏”名称=“方法”值=“提交” >

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

来源

2015-03-08 18:11:46 WorldFS

我不知道在PHP中存在DELETE方法。这使事情变得非常简单。谢谢 – Marco 2015-03-08 18:52:02

你可以保留删除和提交作为输入或按钮，它并没有真正有所作为。但它们可以具有相同的元素。

有几种方式来处理这个问题：

为delete和submit元素**创建标识。

**然后创建一个在线点击处理，像这样：

<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调用的工作方式。我知道这解决了你所问的问题。]

来源

2015-03-08 18:11:55 shmuli

jQuery：ajax，点击提交按钮

回答

相关问题