我正在尝试在 python Flask 应用程序中使用 JS 和 HTML 显示响应式进度条。 不幸的是，我无法以百分比形式获取 JS 调用服务器的进度。我想要前端的进度百分比，以便用户能够查看他或她需要等待多长时间。
@app.route('/test')
def testindex():
return render_template('layouts/loading.html')
@app.route('/process_data')
def process_data():
return data_info_list
here some time taking process like, get requests to some file urls, reading it's data and processing it. And at the end it will return data_info_list this to front end.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Loading Progress Bar</title>
<style>
#progress-bar {
width: 100%;
background-color: #f3f3f3;
}
#progress {
width: 0%;
height: 30px;
background-color: #4caf50;
text-align: center;
line-height: 30px;
color: white;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="progress-bar">
<div id="progress">%</div>
</div>
<br>
<button onclick="startProcess()">Start Process</button>
<script>
function startProcess() {
$.ajax({
xhr: function() {
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener("progress", function(evt) {
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
//Do something with upload progress here
console.log(percentComplete);
}
}, false);
xhr.addEventListener("progress", function(evt) {
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
//Do something with download progress
console.log(percentComplete);
}
}, false);
return xhr;
},
type: 'POST',
url: "/process_data",
data: {},
success: function(data){
//Do something on success
}
});
}
</script>
</body>
</html>
这就是我到目前为止所做的。我没有收到任何错误，也没有在控制台中获取进度百分比。
将 CSS 修改为：
#progress {
height: 30px;
background-color: #4caf50;
text-align: center;
line-height: 30px;
color: white;
transition: width 0.3s ease-in-out;
}
然后将您的 html 和脚本更新为：
<body>
<div id="progress-bar">
<div id="progress" style="width: 0%;">0%</div>
</div>
<br>
<button onclick="startProcess()">Start Process</button>
<script>
function startProcess() {
$.ajax({
xhr: function() {
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener("progress", function(evt) {
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
var progressWidth = percentComplete * 100;
$('#progress').css('width', progressWidth + '%').text(progressWidth.toFixed(0) + '%');
}
}, false);
xhr.addEventListener("progress", function(evt) {
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
var progressWidth = percentComplete * 100;
$('#progress').css('width', progressWidth + '%').text(progressWidth.toFixed(0) + '%');
}
}, false);
return xhr;
},
type: 'POST',
url: "/process_data",
data: {},
success: function(data){
// Do something on success
}
});
}
</script>
</body>
此处，xhr.upload.addEventListener("progress", ...) 和 xhr.addEventListener("progress", ...) 事件处理程序，更新 #progress div 的宽度和文本以反映进度百分比
使用progressWidth.toFixed(0) + '%'以整数形式显示进度百分比