假设：有一些cablemodems，一个人想要从MySQL数据库中列出他们的数据。 （ip地址，mac地址，modemtype，...）
以下是HTML和PHP代码:( $ limit value：15或25或50，用户可以选择）
<table>
<?php
$sql = "SELECT ... needed fields from some tables... LIMIT $start, $limit";
$result = mysqli_query( $conn, $sql ) or trigger_error( mysqli_error( $conn ) );
while ( $row = mysqli_fetch_object( $result ) ) {
echo "<tr class='modem_row' id='$row->modem_id' style='color:gray'>\n";
echo "<td>$row->mac_address</td>\n";
echo "<td>$row->ip_address</td>\n";
echo "<td>$row->type</td>\n";
// ...
echo "</tr>\n";
}
mysqli_free_result( $result );
?>
</table>
<div id="progress" style="display:none; width:150px; height:20px"></div>
当数据库查询完成后，jQuery脚本会查询所有显示调制解调器是否“在线”（通过SNMP）。这是jQuery脚本：
<script type="text/javascript">
$(function() {
$(".modem_row").each(function(){
var modem_id = $(this).attr("id");
$.ajax({
url: "/modules/get_modem_state.php?modem_id="+modem_id,
success: function(data) {
if (data == 'online') {
$('#'+modem_id).animate({color: 'black'});
}
}
});
});
});
</script>
好的，它有效。但我想在一个简单的HTML div中看到整个ajax的进展。当jQuery脚本开始时，那么'progress'div出现就好了，然后在一个简单的彩色条中显示百分比，当完成所有ajax查询时，'progress'栏就会消失。
（例如，如果$ limit = 15，则有15个ajax查询。如果第一个查询完成，则'progress'div宽度将为10px，在第二个ajax查询完成后，'progress'div width将20px等。）
我认为我应该使用jQuery Progressbar，但我不知道如何粘合在一起。
答案 0 :(得分：1)
您可以使用任何加载图片。在此处创建您自己的加载图片：http://www.ajaxload.info/
然后修改你的代码：
<div class="loader" style="display:none;">
<img src="loader.gif" alt="" />
</div>
<script type="text/javascript">
$(function() {
$(".modem_row").each(function(){
var modem_id = $(this).attr("id");
$(".loader").show();
$.ajax({
url: "/modules/get_modem_state.php?modem_id="+modem_id,
success: function(data) {
if (data == 'online') {
$(".loader").hide();
$('#'+modem_id).animate({color: 'black'});
}
},
error: function(){
$(".loader").hide();
}
});
});
});
</script>
您需要在<img />标记中添加图片。
如果您想使用jQuery UI Progress Bar，那么您必须设置＆＃34;请求持续时间＆＃34;手动。请求可能在您设置的持续时间之前或您设置的持续时间之后完成。在这两种情况下，它都是糟糕的用户体验。
这是设置jQuery UI进度条的链接：http://jqueryui.com/progressbar/#label
您无法获得请求的确切持续时间（请求DB +请求服务器+处理+内存+ CPU ...很多因素），除非您正在加载一个Flash文件。 Flash有一种技术可以计算加载到舞台上的所有组件的大小，它可以为您提供精确的实时进度条。除非您正在构建Flash应用程序，否则使用它是没有意义的。
编辑2：
这是使用jQuery UI Progress Bar的解决方案：
<div class="loader" style="display:none;">
<div id="progressbar"><div class="progress-label">Loading...</div></div>
</div>
<script type="text/javascript">
$(function() {
var progress_duration = 2000;
var total_number_of_items = 15;
$("#progressbar").progressbar({
value: false,
change: function() {
var percent = $("#progressbar").progressbar("value") + "%";
$(".progress-label").text(percent);
},
complete: function() {
$(".progress-label").text("Complete");
}
});
function calculateProgress(){
var val = $("#progressbar").progressbar("value") || 0;
var step = Math.round(100 / total_number_of_items);
var new_val = val + step;
if(new_val > 100) new_val = 100;
$("#progressbar").progressbar("value", new_val);
if(val < 99){
setTimeout(calculateProgress, 80);
}
}
function animateProgressBar(){
setTimeout(calculateProgress, progress_duration);
}
$(".modem_row").each(function(){
var modem_id = $(this).attr("id");
$(".loader").show();
$.ajax({
url: "/modules/get_modem_state.php?modem_id="+modem_id,
success: function(data) {
if(data == 'online'){
animateProgressBar();
$('#'+modem_id).animate({color: 'black'});
}
},
error: function(){
}
});
});
});
</script>
这里有一些CSS代码：
.ui-progressbar {
position: relative;
}
.progress-label {
position: absolute;
left: 50%;
top: 4px;
font-weight: bold;
text-shadow: 1px 1px 0 #fff;
}
答案 1 :(得分：1)
一个简单的例子：
.progress-bar{height:20px; width:400px;}
.status{height:20px; background:green; width:0px; text-align:center;}
#btn{paddding:10px; width:100px; background:red;cursor:hand;cursor:pointer;}
<div>
<div id="btn" onclick="Call()">click here</div>
</div>
<div class="progress-bar">
<div class="status"></div>
</div>
<table>
<tbody>
<tr id="row1" class="modem_row"><td> - </td></tr>
<tr id="row2" class="modem_row"><td> - </td></tr>
<tr id="row3" class="modem_row"><td> - </td></tr>
<tr id="row4" class="modem_row"><td> - </td></tr>
<tr id="row5" class="modem_row"><td> - </td></tr>
</tbody>
</table>
Javascript功能：
function Call(){
var nRows = $(".modem_row").length;
if(nRows > 0){
var width = $(".progress-bar").width();
var unit = width/nRows;
var unitPercent = 100/nRows;
var $statusDiv = $(".progress-bar").children('.status').eq(0);
var oldWidth = 0;
var newWidth = 0;
var percent = 0;
var msTimer =0;
var count = 1;
$(".modem_row").each(function(){
msTimer += 800;//miliseconds
setTimeout(function(){ //this code should be in ajax's success function:
oldWidth = $statusDiv.width();
newWidth = oldWidth + unit;
percent = unitPercent*count;
//here you can use animate() with jqueryUI.
$statusDiv.width(newWidth).text(percent + " %");
count++;
}, msTimer);
});//each
}//if
}
在jsfiddle中测试。
定义进度条的宽度，脚本将检测它并计算必须增加的数量。
答案 2 :(得分：0)
感谢AiApaec，最后一个简单的工作栏： （修改后的js / html代码..）
<style>
.progress-bar { height:10px; width:200px }
.status { height:10px; background:silver; width:0px }
</style>
<div class="progress-bar">
<div class="status"></div>
</div>
<script type="text/javascript">
$(function() {
var nRows = $(".modem_row").length;
if ( nRows > 0) {
var width = $(".progress-bar").width();
var unit = width/nRows;
var $statusDiv = $(".progress-bar").children('.status').eq(0);
var oldWidth = 0;
var newWidth = 0;
var i = 0;
$(".modem_row").each(function(){
var modem_id = $(this).attr("id");
$.ajax({
url: "/modules/get_modem_state.php?modem_id="+modem_id,
success: function(data) {
oldWidth = $statusDiv.width();
newWidth = oldWidth + unit;
$statusDiv.width(newWidth);
if ( ++i == nRows ) {
$('.status').fadeOut();
}
if (data == 'online') {
$('#'+modem_id).animate({color: 'black'});
}
}
});
});
}
});
</script>
我希望它会帮助别人。