Question

在我的代码中，我有一个典型的AJAX调用：

 doAJAX("MyScript",{Stuff1},{Stuff2}, {Stuff3});

其中Stuff1，Stuff2，Stuff3设置属性，调用函数等。由于这会查询服务器，因此通常需要1-2秒。在此期间，我想展示加载动画。

对JQuery和AJAX都不熟悉，我想知道最简单的包装方式是用“加载...”文本“加载”动画吗？

doAJAX是一个获取输入并调用以下内容的函数：

$.ajax({
type: "GET",
url: server,
crossDomain: true,
data: inputData,
dataType: 'jsonp',
success: successFunction,
error: errorFunction,
timeout: 5000
});

Answer 1

您可以在div旁边放置一个元素，例如img包含display: none和“正在加载...”文字。

在调用AJAX函数之前，显示div。

成功时，隐藏它。

这样的事情：

HTML：

<div class="loading"><img src="loading.gif"> Loading...</div>

CSS：

.loading {
  display: none;
}

的JavaScript：

$(".loading").show();

$.ajax({
  type: "GET",
  url: server,
  crossDomain: true,
  data: inputData,
  dataType: 'jsonp',
  success: function(){
    $(".loading").hide();
  },
  error: errorFunction,
  timeout: 5000
});

OR beforeSend实现：

$.ajax({
  type: "GET",
  url: server,
  crossDomain: true,
  data: inputData,
  dataType: 'jsonp',
  beforeSend: function(){
    $(".loading").show();
  },
  success: function(){
    $(".loading").hide();
  },
  error: errorFunction,
  timeout: 5000
});

Answer 2

您可以为通话定义beforeSend和done功能

$.ajax({
  url: "demo.html",
  beforeSend: function ( xhr ) {
       // Make your init action of the progress
       // show the loading image and blur the screen
  }
}).done(function ( data ) {
      // End action of the progress
       // remove the loading image
});

还有jQuery throbber插件：http://www.jquery-plugins.info/throbber-aka-loading-animation-00015440.htm

它非常简单易于集成。可以手动运行，也可以自动附加ajax事件。

在Jquery中调用AJAX期间加载圆圈

2 个答案:

HTML：

CSS：

的JavaScript：