Остановить запрос ajax от публикации данных до получения ответа?

Question

Я написал основную систему комментариев, которая представляет собой простую форму для записи в базу данных, и она также использует 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

Есть много способов, чтобы справиться с этим, но лучше всего включает в себя проверку данных на стороне сервера. Вы хотите, чтобы люди не перегружали базу данных непреднамеренно (проблема «толстого пальца») или преднамеренно (скучный сценарий kiddie, который решает сбой вашего сервера или заполнять вашу базу данных мусором).

Лучшее решение:

• Генерация одноразовой фишки при запросе страницы (так называемой «одноразовым»)
• сообщением, что нонс когда вы размещаете данные
• только принять его на на стороне сервера, если 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

// объявить глобальный АЯКС переменную запроса

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