在 AJAX 开始时加载 GIF/显示文本并在 AJAX 停止时隐藏答案

【问题标题】：Load a GIF/show text on AJAX start and hide on AJAX stop在 AJAX 开始时加载 GIF/显示文本并在 AJAX 停止时隐藏
【发布时间】：2017-04-21 05:34:29
【问题描述】：

以下是我目前工作的示例/副本。当 AJAX 启动时，我无法加载 GIF/警报/显示图像。单击保存按钮不会显示任何内容，而只会在指定超时后显示一条警报消息。作为开发人员，我知道会出现错误消息，但普通用户永远不会知道并尝试多次单击，这将导致整个页面混乱。

我在 SO 中发现了很多与我相似的问题。但没有任何效果。您可以将其标记为重复，但在此之前请检查我的 fiddle here. 我使用了here 的答案 Sampson 的答案，得到了近 1000 个正面回应。我无法弄清楚我哪里出错了。我应该只根据要求在提交函数中调用 AJAX。是因为 AJAX 在提交功能阻塞？我还被指示仅使用 jquery1.10.2。有没有像 AjaxStart 和 AjaxStop 这样的东西只能在特定的框架中工作？

注意：在我的fiddle 中，超时时间为 10 秒。填写详细信息并单击保存后，第 10 秒您将收到一条错误消息。我想在这里显示加载 GIF，间隔 10 秒。

代码如下：

HTML

<body>
  <form action="" method="POST" name="form" id="form">
    <div id='container'>
      <h1>Enter User Details</h1>
      <div class='signup'>
        <input type='text' name="Name" id="Name" placeholder='Name* (Ex:Andrew Flintoff)' maxlength="30" required title="Enter only characters with proper spaces" />
        <input type='date' id='DOB' name="DOB" style="width:80%; padding:5px 0px 5px 0px; margin-top:2%;" placeholder='Date of Birth* : ' id="mydate" required/>
        <div class="radiobtn">
          <table cellpadding="6" cellspacing="0">
            <tr>
              <td style="color:rgba(0,0,0,0.5); font-weight:300">
                <label>Gender*</label>
              </td>
              <td>
                <input type="radio" id="radio01" name="Gender" value="Male" required>Male
                <input type="radio" id="radio02" name="Gender" value="Female" required>Female </td>
            </tr>
          </table>
        </div>

        <input type='text' id="EmailId" name="EmailId" placeholder='Email* (Ex:adamclarke@yahoo.com)' required />
        <input type="submit" name='submit' value="Save" />
        <a href="usersList.html">
          <input type='button' name="cancel" value="Cancel" />
        </a>
      </div>
    </div>
    <!-- <pre id="result">
</pre> -->
  </form>
  <div class="modal">
    <!-- Place at bottom of page -->
  </div>
</body>

CSS

.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba( 255, 255, 255, .8) url('https://i.stack.imgur.com/FhHRx.gif') 50% 50% no-repeat;
}


/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */

body.loading {
  overflow: hidden;
}


/* Anytime the body has the loading class, our
   modal element will be visible */

body.loading .modal {
  display: block;
}

$body = $("body");

$(document).on({
  ajaxStart: function() {
  console.log("ajax started");
    $body.addClass("loading");
  },
  ajaxStop: function() {
    $body.removeClass("loading");
  }
});

$(function() {
  $('form').submit(function() {
    var temporaryTimeOut = 10000;
    $.ajax({
      url: "http://localhost/xmlString", //Url,
      type: 'POST',
      crossDomain: true,
      dataType: 'jsonp',
      reTry: 1, //setRetry,
      timeout: 10000, //setTimeOut,
      success: function(response) {
        var maximumUsers = 4;
        if (2 != maximumUsers) {
          var dialog = confirm("Add another User?");
          if (dialog == true) {
            window.location.href = "userDetails.html";
          } else {
            window.location.href = "usersList.html";
          }
        } else {
          alert("Maximum users limit of " + maximumUsers + " has been reached");
          window.location.href = "usersList.html";
        }
        alert(serverResponse + "\nData saved successfully");
        return;
      },
      error: function(XMLHttpRequest, textStatus, errorThrown) {
        if (textStatus === "timeout") {

          alert("Server connectivity error! Pls check your internet connection");
          var maximumUsers = 4;
          if (2 != maximumUsers) {
            var dialog = confirm("Add another User?");
            if (dialog == true) {
              window.location.href = "userDetails.html";
            } else {
              window.location.href = "usersList.html";
            }
          } else {
            alert("Maximum users limit of " + maximumUsers + " has been reached");
            window.location.href = "usersList.html";
          }

        }
      }
    });
    return false;

  });
});

【问题讨论】：

在$.ajax({... 之前添加$("#loader").fadeIn()，在success 和error 回调中添加$("#loader").fadeOut()。现在#loader 是加载器元素，您需要使用 css 添加和设置样式。

标签： javascript jquery html ajax rest

【解决方案1】：

在您的 ajax 代码中添加属性 beforeSend。

$.ajax({
      url: "http://localhost/xmlString", //Url,
      type: 'POST',
      beforeSend: function(){ 
          //show image/text code....
      },

然后将隐藏文本/图像代码放入 ajax 的 success 和 error 属性中。

【讨论】：

这真的很有帮助。我会相应地做进一步的修改。谢谢。