我希望显示我的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>