Я пытаюсь отобразить адаптивный индикатор выполнения, используя JS и HTML в приложении Python Flask. К сожалению, я не могу получить информацию о ходе вызова 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.info(percentComplete);
}
}, false);
xhr.addEventListener("progress", function(evt) {
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
//Do something with download progress
console.info(percentComplete);
}
}, false);
return xhr;
},
type: 'POST',
url: "/process_data",
data: {},
success: function(data){
//Do something on success
}
});
}
</script>
</body>
</html>
Это то, что я сделал до сих пор. Я не получаю никаких ошибок и не получаю процент прогресса в консоли.
🤔 А знаете ли вы, что...
JavaScript поддерживает объектно-ориентированное программирование.
Измените свой CSS так:
#progress {
height: 30px;
background-color: #4caf50;
text-align: center;
line-height: 30px;
color: white;
transition: width 0.3s ease-in-out;
}
а затем обновите свой html&script до:
<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", ...) обновляют ширину и текст элемента div #progress, чтобы отразить процент выполнения
используйте ProgressWidth.toFixed(0) + '%' для отображения процента прогресса в виде целого числа