在AJAX開始時加載GIF /顯示文本，在AJAX停止時隱藏

Question

以下是我目前正在工作的示例/重復項。 AJAX啟動時，我無法加載GIF /警報/顯示圖像。 單擊“保存”按鈕將不顯示任何內容，而僅在指定的超時后顯示警報消息。 作為開發人員，我知道將出現一條錯誤消息，但是普通用戶永遠不會知道該錯誤消息，而是嘗試多次單擊，這將導致整個頁面混亂。

我在SO中發現了很多與我相似的問題。 但是沒有任何效果。 您可以將其標記為重復，但是在執行此操作之前，請先在此處檢查我的小提琴。 我使用了桑普森（Sampson）的答案，在這里得到了將近1000個肯定的答復。 我無法弄清楚哪里出了問題。 我應該按照要求只在Submit函數中調用AJAX。 是否由於提交功能阻塞中的AJAX？ 我還被指示僅使用jquery1.10.2。 是否有像AjaxStart和AjaxStop這樣的東西僅在特定框架下才能工作？

注意：在我的小提琴中，超時是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;
}

JS

$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;

  });
});

Answer 1

在您的Ajax代碼中添加一個beforeSend屬性。

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

然后將您的隱藏文本/圖像代碼放入ajax的success和error屬性中。

在AJAX開始時加載GIF /顯示文本，在AJAX停止時隱藏

問題描述

1 個解決方案

解決方案1
2 已采納 2017-04-21 05:53:04

在AJAX開始時加載GIF /顯示文本，在AJAX停止時隱藏

問題描述

1 個解決方案

解決方案1 2 已采納 2017-04-21 05:53:04

解決方案1
2 已采納 2017-04-21 05:53:04