如何动态更改进度条状态?

时间:2016-03-09 10:04:15

标签: javascript jquery ajax jquery-ui progress-bar

我希望显示我的ajax调用客户端页面的进度状态,以及在任务的实时进度中过于动态。任务很大并且进行了大量处理,因此最好向等待用户显示%年龄状态。

我正在使用JQuery Progress Bar UI,但它目前显示静态进度。进度条已完成,但实际上仍在处理请求。

如何更改代码以检索任务的动态状态并在进度中显示?以下是我的代码:

进度功能:

function progress() {
var progressbar = $( "#progressbar" ),
  progressLabel = $( ".progress-label" );

progressbar.progressbar({
  value: false,
  change: function() {
    progressLabel.text( progressbar.progressbar( "value" ) + "%" );
  },
  complete: function() {
    progressLabel.text( "Complete!" );
  }
});

function progress() {
  var val = progressbar.progressbar( "value" ) || 0;

  progressbar.progressbar( "value", val + 2 );

  if ( val < 99 ) {
    setTimeout( progress, 80 );
  }
}

setTimeout( progress, 2000 );
}

Ajax电话:

function loadAjax() {

progress();
var urlValue = document.getElementById("url").value;

$.ajax({
    type : "GET",
    url : "/prismweb/testSinglePage?url="+urlValue,
    success : function(response) {

                $("#progressbar").hide();
               //more code goes here....
            }
        });
}   

HTML:

<div id="url_bar"><input id="url" type="text" placeholder="Enter the page URL...." size="10"></div>

<div id="progressbar"><div class="progress-label">Loading...</div></div>

0 个答案:

没有答案