ajax正在运行时显示进度条或微调器

-5

当我正在运行ajax时试图添加进度条或微调器，但进度条和微调控件只会出现在与来自ajax的成功警报同时出现。ajax正在运行时显示进度条或微调器

注意：我正在使用JSP，并且使用ajax通过servlet更新数据库数据。进度条正在使用引导程序。

$('#sync').click(function() { 

     var start = $('#startdate').val(); 

     var end = $('#enddate').val(); 

     if ((start !== "") && (end !== "")) { 

      var startDate = new Date(start); 

      var endDate = new Date(end); 

      $('#cover').show(); 
      $.ajax({ 
       type: "post", 
       url: "PRSync", 
       data: "start=" + startDate.yyyymmdd() + 
         "&end=" + endDate.yyyymmdd(), 
       async: false, 
       beforeSend: function() { 

       }, 
       success: function (data) { 
        var arr = data.split('|'); 
        if (arr[0] === "0") { 
         alert("Sync fail"); 
        } else { 
         alert("Sync Succesfull. Total rows of " + arr[1] + " affected."); 
        } 
       }, 
       error: function (jqXHR, textStatus, errorThrown, err4) { // if error occured 
        alert(jqXHR + " _ " + textStatus + " _ " + errorThrown + " _ " + err4); 
       }, 
       complete: function() { 
        $('#cover').fadeOut(1000); 
       } 
      }); 

     } 
    }); 
    $(document).ajaxStart(function() { 
     // show loader on start 
     showbusy(); 
    }).ajaxSuccess(function() { 
     // hide loader on success 
     hidebusy(); 
    }); 


    Date.prototype.yyyymmdd = function() { 
     var yyyy = this.getFullYear().toString(); 
     var mm = (this.getMonth() + 1).toString(); // getMonth() is zero-based 
     var dd = this.getDate().toString(); 
     return yyyy + "-" + (mm[1] ? mm : "0" + mm[0]) + "-" + (dd[1] ? dd : "0" + dd[0]); // padding 
    }; 

    var myApp; 
    myApp = myApp || (function() { 
     var pleaseWaitDiv = $('<div class="modal fade" style=top:40% id="pleaseWaitDialog" data-backdrop="false" data-keyboard="false"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h4 class="modal-title">Synchronizing is processing</h4></div><div class="modal-body"><div class="progress"><div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div></div></div></div></div></div>'); 
     return { 
      showPleaseWait: function() { 
       pleaseWaitDiv.modal(); 
      }, 
      hidePleaseWait: function() { 
       pleaseWaitDiv.modal('hide'); 
      }, 
     }; 
    })(); 
    function showbusy() { 
     myApp.showPleaseWait(); 
    } 
    function hidebusy() { 
     myApp.hidePleaseWait(); 
    }

来源

2015-07-10 Geoffrey

为什么'异步：FALSE'？ –

这是一个很好的博客，可以帮助你。 http://www.dave-bond.com/blog/2010/01/JQuery-ajax-progress-HMTL5/ – Dorvalla

你可以假设，如果开始和结束都不是空AJAX将开始？那么，为什么你不把这个陈述附加到你的DOM中，并在成功时再次隐藏它呢？ –

你有没有尝试过这样的：

$(document).bind("ajaxStart", function(){ 
    showbusy(); }) 
.bind("ajaxStop", function(){ 
    hidebusy(); 
});

显然，如果你的Ajax调用处理速度非常快，它似乎是你的功能被触发“晚”，但由事件结合$(document)你要确保它们没有被触发一次。

如果仍然不适合您的需求，我会放在功能Ajax调用内：

$.ajax({ 
    beforeSend: showbusy(), 
    complete: hidebusy() 
});

来源

2015-07-10 08:27:40

您可以使用jquery.blockUI.js。

你可以在你像这样的代码初始化：

$(document).ajaxStart($.blockUI).ajaxStop($.unblockUI);

来源

2015-07-10 08:38:00 Kashyap

ajax正在运行时显示进度条或微调器

回答

相关问题