javascript 问题消息验证(员工存在之前)基于按钮点击提交显示多次？

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

字符串

更新文章

我试着根据你的帖子回答，但没有改变消息仍然显示两个多的时间时，按同一个按钮多次。
我试图

const $submitBtn = $('#btnsubmit');
    
       $("#ResignationApp").submit(function (e) {
           e.preventDefault();

         

           // Serialize the form data
           $submitBtn.prop('disabled', true);
           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 {
                       if (message === "Employee Exist Before") {
                           Swal.fire({
                               icon: 'error',
                               //width: '850px',
                               //height: '150px',
                               //customClass: 'swal-wide',
                               title: 'Resignation Submission Form',
                               text: 'Employee Exist Before'
                           });
                           return false;
                       }
                       else {
                           Swal.fire({
                               icon: 'error',
                               title: 'Resignation Submission Form',
                               text: message
                           });
                           return false;
                       }
                   }

             
                     console.log("errorMsg is" + errorMsg);
               
               },
               error: function (error) {
                    var url = '@Url.Action("UnauthorizedUser", "Home")' + '?filenumber=' + empidval;
                    window.open(url, '_self');
           
               }
             
           }).always(() => {
               // re-enable the submit button...
               $submitBtn.prop('disabled', false);
           });
   });

型

从错误消息来看，您的服务器端代码已经足够健壮，可以处理具有相同内容的重复请求。因此，您只需更新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);
  });
});

字符串
请注意，按钮在always处理程序中被重新启用。这是为了无论AJAX请求成功还是失败，按钮总是被重新启用。
还要注意的是，在按钮内部/旁边显示一个加载微调器也是一个好主意，以显示一个活动仍在发生，并且按钮是出于某种目的而不是错误而被禁用的。

javascript 问题消息验证(员工存在之前)基于按钮点击提交显示多次？

1条答案

相关问题

热门标签

最新问答