在原型中,我可以用下面的代码显示“加载…”图像:

var myAjax = new Ajax.Request( url, {method: 'get', parameters: pars, 
onLoading: showLoad, onComplete: showResponse} );

function showLoad () {
    ...
}

在jQuery中,我可以将服务器页面加载到一个元素中:

$('#message').load('index.php?pg=ajaxFlashcard');

但是我如何附加一个加载旋转到这个命令,因为我在原型?


当前回答

使用加载插件:http://plugins.jquery.com/project/loading

$.loading.onAjax({img:'loading.gif'});

其他回答

使用加载插件:http://plugins.jquery.com/project/loading

$.loading.onAjax({img:'loading.gif'});

你总是可以使用Block UI jQuery插件,它为你做的一切,它甚至在ajax加载时阻塞任何输入的页面。如果这个插件似乎不能正常工作,你可以在这个回答中阅读正确的使用方法。来看看。

我的ajax代码看起来是这样的,实际上,我只是注释掉了async: false行,旋转器就出现了。

$.ajax({
        url: "@Url.Action("MyJsonAction", "Home")",
        type: "POST",
        dataType: "json",
        data: {parameter:variable},
        //async: false, 

        error: function () {
        },

        success: function (data) {
          if (Object.keys(data).length > 0) {
          //use data 
          }
          $('#ajaxspinner').hide();
        }
      });

我在ajax代码之前显示了一个函数中的旋转器:

$("#MyDropDownID").change(function () {
        $('#ajaxspinner').show();

对于Html,我使用了一个字体很棒的类:

<i id=“ajaxspinner” class=“fas fa-spinner fa-spin fa-3x fa-fw” style=“display:none”></i>

希望它能帮助到别人。

你可以使用jQuery的。ajax函数,使用它的选项beforeSend,定义一些函数,你可以在其中显示类似loader div的东西,在success选项中,你可以隐藏loader div。

jQuery.ajax({
    type: "POST",
    url: 'YOU_URL_TO_WHICH_DATA_SEND',
    data:'YOUR_DATA_TO_SEND',
    beforeSend: function() {
        $("#loaderDiv").show();
    },
    success: function(data) {
        $("#loaderDiv").hide();
    }
});

你可以有任何旋转Gif图像。下面是一个网站,根据你的配色方案,它是一个很棒的AJAX加载器生成器:http://ajaxload.info/

这对我来说是最好的方法:

jQuery:

$(document).ajaxStart(function() {
  $(".loading").show();
});

$(document).ajaxStop(function() {
  $(".loading").hide();
});

咖啡:

  $(document).ajaxStart ->
    $(".loading").show()

  $(document).ajaxStop ->
    $(".loading").hide()

文档: ajaxStart, ajaxStop