Ajax- beforeSend_JavaScript

为了防止两次出错，我使用beforeSend。

hasSent = false

function submit() {
    if (!hasSent)
        $.ajax({
            url: "${createLink(controller:'userInvitation', action:'ajaxUpdate')}",
            type: "POST",
            data: $("#invitationForm").serialize(),
            success: function(data, textStatus, jqXHR) {
                $('#invitationForm')[0].reset();
                $('.thank-you-modal').modal('show');
                hasSent = true;
                console.log(hasSent)
            },

            complete: function() {
                hasSent = false;
                console.log(hasSent)
            }
        });
}

如您所见，仅当hasSent=false ，ajax才应发生。 由于某些原因，如果用户多次单击“提交”按钮， ajax也会发生

为了防止此类问题，请在发送ajax之前禁用按钮，然后在成功函数中启用anable

$(mybutton).prop("disabled",true);
// ajax call here

然后

success: function(data, textStatus, jqXHR) {
    $(mybutton).prop("disabled",false);
    // code here
}

您可以创建另一个标志，例如isSending

function submit() {
   if(isSending)
     return;

   isSending = true

   $.ajax({
       // ...
        complete: function() {
            isSending = false;
        }
   });
}

有两种方法可以做到这一点。

1）创建一个标志并检查是否按下了按钮。 如果按下则不执行ajax代码

请求成功后将标志改回，就像这样

   success:function(...)
            {
               flag=false;
            }

或者，您可以在单击按钮时禁用该按钮，这样将执行请求，并且不会出现双击情况。 像这样完全启用按钮

 complete:function(..){ $("yourbutton").attr("disabled",false)}

Ajax- beforeSend

问题描述

1楼

2楼

3楼