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

Question

i have written a basic commenting system which is a simple write to database form and it uses ajax as well.

The issue is that if i enter my message, and then spam send / the enter key it seems to stack up and then everything is written to the database multiple times.

My ajax is like so:

$(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;
    });
});

The submit button does become disabled, but the form can still be entered via the enter keyboard button or even still with a mass spam of the submit button (which is supposed to be disabled)

Is there a way to 100% disable this form with jquery, until the success JSON message is received?

Anymore code just let me know!

Answer 1

In this case, i would not use delegation. I would instead bind the event directly to the form using .one since each form should submit only once (if that's the case.) If you instead only have one addComment form, then i question why you are using delegation in the first place.

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

})

Answer 2

Just keep track of if a request is in progress:

$(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

There are lots of ways to handle this, but the best involves validating the data on the server end. You want to prevent people from overloading the database inadvertently (the "fat finger" problem) or deliberately (the bored script kiddie who decides to crash your server or fill your database with garbage).

The best solution:

• Generate a one-time token when the page is requested (called a "nonce")
• Post that nonce when you post the data
• Only accept it on the server side if the nonce has never been used

This obviously requires you to keep track of a list of valid nonces, but it prevents any glitches or abuse of the send button.

Also, as others have pointed out, disable the button much earlier and only run the submit action handler once. That will help with the inadvertent double-clicks and so on, but you also need the nonce to prevent compulsive clickers or intentional misuse.

Answer 4

Can you do it like below:

$(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

// declare a global ajax request variable

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
            }
        });
    }
}