如何避免多次发送表单

Question

我在 jquery 对话框中有一个表单，它没有提交按钮。相反，它是通过单击确定对话框按钮提交的。

所以当点击确定时，会发生这种情况：

var data = $('#form').serialize();
$.post('page.php',data)
  .success( function(result) {

  // result might be description of an error or other problem, then I display error
  ...
  // or ok, then I hide form and change OK button, so now it closes the dialog
  ...
  myDialog.dialog( "option", "buttons", [{ text: ok, click: function() { $(this).dialog("close"); } }] );    

 });

它工作正常。表单的数据是行，它们随后显示在页面的表格中。但是我被报告了好几次，那个用户提交了 N 行并获得了 3xN 新行。所以看起来她在 OK 点击功能改变之前意外地发送了 3 次表单。

我不明白这会如何发生。我尝试了很多双击或三次单击确定按钮，结果是

• 数据已发送一次
• 表单未隐藏
• 即使表单没有隐藏，在单击“确定”后对话框关闭并且没有再次发送任何内容

所以我需要你的建议。我该怎么做才能防止她再次发送同一个表单？

Answer 1

我建议您在单击一次按钮后解除单击事件侦听器与按钮的绑定。这可能只是一个简单的解决方案，但我认为它可以正常工作。

$('#submitButton').click(function(){

    $(this).unbind('click');

    var data = $('#form').serialize();

    $.post('page.php',data).success( function(result) {
        // result might be description of an error or other problem, then I display error
        ...
        // or ok, then I hide form and change OK button, so now it closes the dialog
        ...
        myDialog.dialog( "option", "buttons", [{ text: ok, click: function() {
        $(this).dialog("close"); } }] );    
    });
});

编辑

如果表单结果无效要重新绑定点击功能：

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

function submitForm();    
    $('#submitButton').unbind('click');

    var data = $('#form').serialize();

    $.post('page.php',data).success( function(result) {
        // result might be description of an error or other problem, then I display error

        // if result invalid rebind the click event
        if(resultInvalid){
            $('#submitButton').click(function(){
                submitForm();
            });
        }
        // or ok, then I hide form and change OK button, so now it closes the dialog
        ...
        myDialog.dialog( "option", "buttons", [{ text: ok, click: function() {
        $(this).dialog("close"); } }] );    
    });
}

Answer 2

你可以使用 one() 代替。

$("#submitButton").one("click", function() {
  //ajax code here
});