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

Question

Following is a sample/duplication of what I'm working currently. 以下是我目前正在工作的示例/重复项。 I'm unable to load a GIF/alert/show image, when AJAX starts. AJAX启动时，我无法加载GIF /警报/显示图像。 The click on save button will show nothing, but just an alert message after the specified timeout. 单击“保存”按钮将不显示任何内容，而仅在指定的超时后显示警报消息。 As a developer I know that an error message is going to appear, but an ordinary user will never know that and tries to click multiple times which will result in a messing up of the whole page. 作为开发人员，我知道将出现一条错误消息，但是普通用户永远不会知道该错误消息，而是尝试多次单击，这将导致整个页面混乱。

I have found a lot of questions in SO that are similar to mine. 我在SO中发现了很多与我相似的问题。 But nothing worked. 但是没有任何效果。 You can mark this as duplicate, but before doing please check my fiddle here. 您可以将其标记为重复，但是在执行此操作之前，请先在此处检查我的小提琴。 I've used the answer Sampson's answer that is answered here , which has got nearly 1000 positive responses. 我使用了桑普森（Sampson）的答案，在这里得到了将近1000个肯定的答复。 I'm unable to figure out where I'm going wrong. 我无法弄清楚哪里出了问题。 I'm supposed to call AJAX in submit function only as per the requirements. 我应该按照要求只在Submit函数中调用AJAX。 Is it because of AJAX in submit function blocking? 是否由于提交功能阻塞中的AJAX？ I'm also instructed to use jquery1.10.2, only. 我还被指示仅使用jquery1.10.2。 Is there anything like AjaxStart and AjaxStop will work only in particular frameworks? 是否有像AjaxStart和AjaxStop这样的东西仅在特定框架下才能工作？

NOTE: In my fiddle , the timeout is 10 seconds. 注意：在我的小提琴中，超时是10秒。 Once you fill the details and click on save, 10th second you will get an error message. 填写详细信息并单击“保存”后，第10秒，您将收到一条错误消息。 I want to display loading GIF here, for the interval of 10seconds. 我想在此处显示加载GIF的时间，间隔为10秒。

The code goes like this: 代码如下：

HTML 的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 的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 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

add a property beforeSend in your ajax code. 在您的Ajax代码中添加一个beforeSend属性。

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

then put your hide text/image code in success and error properties of ajax. 然后将您的隐藏文本/图像代码放入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