在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