Question

我写了一个基本的评论系统，这是一个简单的数据库表格写入，它也使用ajax。

问题是，如果我输入我的邮件，然后垃圾邮件发送/输入密钥，它似乎堆叠起来，然后所有内容都被多次写入数据库。

我的ajax是这样的：

$(document).ready(function(){
$(document).on('submit', '.addcomment', function() {
    var $targetForm = $(this);

$.ajax({
type: "POST",
url: "process/addcomment.php",
data: $targetForm.serialize(),
dataType: "json",
success: function(response){
    if (response.databaseSuccess == true) {
        $("#container").load("#container");
        $targetForm.find('#addcommentbutton').attr("disabled", true);
    }
    else {
        $ckEditor.after('<div class="error">Something went wrong!</div>');
    }
}
});

    return false;
    });
});

提交按钮确实已被禁用，但仍然可以通过输入键盘按钮输入表单，或者甚至仍然使用提交按钮的大量垃圾邮件（应该禁用）

有没有办法100％使用jquery禁用此表单，直到收到成功的JSON消息？

不再代码只是让我知道！

Answer 1

在这种情况下，我不会使用委托。我会使用.one直接将事件绑定到表单，因为每个表单只应提交一次（如果是这样的话。）如果您只有一个addComment表单，那么我会问你为什么在第一个使用委托的地方。

$(commentForm).appendTo(selector).one("submit",function(e){
    e.preventDefault(); // prevent this submit
    $(this).submit(false); // prevent future submits
    // submit data to server

})

Answer 2

只需跟踪请求是否正在进行中：

$(document).ready(function(){
  var isSubmitting = false;
  $(document).on('submit', '.addcomment', function() {
    var $targetForm = $(this);
    if (!isSubmitting) {
      isSubmitting = true;
      $.ajax({
         ... 
         success: function(response){
           ...
         },
         complete: function() { isSubmitting = false; }
       });
    }
  });

Answer 3

有很多方法可以解决这个问题，但最好的方法是验证服务器端的数据。你想防止人们无意中重载数据库（“胖手指”问题）或故意（无聊的脚本小子决定使服务器崩溃或用垃圾填满数据库）。

最佳解决方案：

请求页面时生成一次性令牌（称为“nonce”）
发布数据时发布nonce
如果从未使用过nonce，则只在服务器端接受

这显然要求您跟踪有效的随机数列表，但它可以防止任何故障或滥用发送按钮。

此外，正如其他人所指出的那样，请更早地禁用该按钮，并且只运行一次提交操作处理程序。这将有助于无意中的双击等，但你也需要nonce来防止强制性的答题或故意滥用。

Answer 4

你能这样做吗：

$(document).ready(function(){
var isAjaxInProgress = null;
$(document).on('submit', '.addcomment', function() {
    var $targetForm = $(this);
    if(isAjaxInProgress === null ||  !$isAjaxInProgress ){
        isAjaxInProgress = true;
        $.ajax({
            type: "POST",
            url: "process/addcomment.php",
            data: $targetForm.serialize(),
            dataType: "json",
            success: function(response){
                if (response.databaseSuccess == true) {
                    $("#container").load("#container");
                    $targetForm.find('#addcommentbutton').attr("disabled", true);
                }
                else {
                    $ckEditor.after('<div class="error">Something went wrong!</div>');
                }
                isAjaxInProgress = false;
            }
        });
    }

    return false;
    });
});

Answer 5

//声明一个全局ajax请求变量

var is_request_sent = false;
function send_msg()
{
    if(is_request_sent == false)
    {
        $.ajax({
            type: "POST",
            url: "process/addcomment.php",
            data: $targetForm.serialize(),
            dataType: "json",
            success: function(result){
                //alert(result);
                is_request_sent = false;
           },
            error: function(a,b,c)
            {
                is_request_sent = false;
            },
            beforeSend: function(jqXHR, plain_jqXHR){
                // set request object
                is_request_sent = jqXHR;
                 // Handle the beforeSend event          
            },
            complete: function(){
                // update global request variable
                is_request_sent = false;
             // Handle the complete event
            }
        });
    }
}

停止发送数据的ajax请求，直到收到响应？

5 个答案: