问题消息验证（员工存在之前）基于按钮单击提交多次显示？

Question

我在 asp.net mvc 应用程序 Ajax 请求调用上工作，如果我多次单击按钮提交，我会面临多次发出消息甜蜜警报的情况

如果我按相同的按钮再次提交相同的请求，它将显示（消息员工之前存在）两次

如果我针对同一请求再次按相同按钮提交按钮，它将显示消息验证（消息员工之前存在）3次

正确或预期的行为

当单击“提交”按钮且员工存在之前，则仅显示一次消息验证（消息“员工存在于之前”）。

为什么会发生这种情况以及如何防止多次显示相同的消息

$("#ResignationApp").submit(function (e) {

            e.preventDefault(); 

            var formData = $(this).serialize();
            console.log("data is" + formData)
            $.ajax({
                type: "POST",
                dataType: 'json',
                url: '@Url.Action("RequesterIndex", "Resignation")',
                data: formData,
                success: function (response) {
                    for (let item of response) {
                        if (item.Key === "success") {
                            success = item.Value;
                        }

                        if (item.Key === "message") {
                            message = item.Value;
                        }
                    }
                    if (success) {

                        Swal.fire({
                            icon: 'success',
                            title: 'Submition Request',
                            text: message
                        }).then((result) => {
                            if (result.isConfirmed) {
                                var url = '@Url.Action("IndexResignation", "Home")' + '?filenumber=' + empidval;
                                window.open(url, '_self');                              

                                }
                            });
                      
                    } else {
                            Swal.fire({
                                icon: 'error',
                                title: 'Resignation Submission Form',
                                text: 'Employee Exist Before'
                            });
                            return false;
                       
                    }
                 
                },
                error: function (error) {
                     var url = '@Url.Action("UnauthorizedUser", "Home")' + '?filenumber=' + empidval;
                     window.open(url, '_self');
             
                }
            });
    });
 [HttpPost]
  public JsonResult RequesterIndex(ResignationRequester resignationRequester)
  {
      dynamic responseData = new ExpandoObject();
      responseData.success = false;
      responseData.message = "";
    
      var filenumber = resignationRequester.EmpID;
      if (Session[SessionKeys.UserCode] != null)
      {
          JDEUtility jde = new JDEUtility();
       

          if (ModelState.IsValid)
          {


    



              int checkEmployeeNoExist = jde.CheckEmployeeExistOrNot(resignationRequester.EmpID);
              if (checkEmployeeNoExist >= 1)
              {
                  responseData.success = false;
                  responseData.message = "Employee Exist Before";
                  return Json(responseData);
                
              }


              try
              {
                  Workforce.InsertToReignation(resignationRequester, JoinedDate, (string)Session[SessionKeys.Username], (DateTime)Session[SessionKeys.LastWorkingDate], noticeperiod, (int)Session[SessionKeys.UserCode]);
              }
              catch (Exception ex)
              {
                  responseData.success = false;
                  responseData.message = "Create Not Done Correctly";
                  return Json(responseData);
              }
   
              if (string.IsNullOrEmpty(ViewBag.errorMsg))
              {
                  responseData.success = true;
                  responseData.message = "Resignation Submission form Created successfully";

                  return Json(responseData);
              }



          }
          else
          {
              responseData.success = false;
              var errors = ModelState.Select(x => x.Value.Errors)
                                      .Where(y => y.Count > 0)
                                      .ToList();
              responseData.message = "Some Required Fields Not Added";
              return Json(responseData);

          }
      }
      else
      {
          responseData.success = false;
          responseData.message = "No Data For This File No";
          return Json(responseData);
      }
      return Json(responseData);
     
  }

Answer 1

从错误消息来看，您的服务器端代码似乎已经足够强大，可以处理具有相同内容的重复请求。因此，您只需更新 UI 以防止用户连续单击提交按钮即可。

最简单的方法是在 AJAX 请求进行时禁用该按钮，如下所示：

const $submitBtn = $('#yourSubmitButton');

$("#ResignationApp").on('submit', e => {
  e.preventDefault();

  // disable the button when the AJAX request is sent
  $submitBtn.prop('disabled', true);
 
  $.ajax({
    // ajax setup...
  }).done(response => {
    // 'success' handler here...
  }).fail(err => {
    // 'error' handler here...
  }).always(() => {
    // re-enable the submit button...
    $submitBtn.prop('disabled', false);
  });
});