Question

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

我在SO中发现了很多类似于我的问题。但没有任何效果。您可以将其标记为重复，但在此之前请检查我的 fiddle here.我已经回答了桑普森回答here的答案，该答案有近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;
}

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 / show文本并隐藏在AJAX停止

1 个答案: