как реализовать индикатор выполнения на основе ответа AJAX

Question

как реализовать индикатор выполнения на основе ответа AJAX

Я пытаюсь реализовать индикатор выполнения, основанный на ответе ajax со стороны сервера (PHP). Но я не могу определить расчет индикатора выполнения, например, как рассчитать время выполнения индикатора выполнения между запросом и ответом формы отправки через ajax.

<script>
$('.uploadProject').on('submit',function(e){
e.preventDefault();
//ray.ajax();
var formData = new FormData($(this)[0]);
progress(80, $('#progressBar'));
$.ajax({
url: "ajax/submitted_project_action.php",
type: "POST",
data: formData,
async: false,
success: function (data) {
if(data==1){
window.location.href="submitted_project.php?success";
}else{
window.location.href="submitted_project.php?error";
}
},
cache: false,
contentType: false,
processData: false
});})

 <script>
function progress(percent, $element) {
var progressBarWidth = percent * $element.width() / 100;
$element.find('div').animate({ width: progressBarWidth },500).html(percent + "%&nbsp;");
}
</script>

Мой HTML-код

   <style>
#progressBar {
width: 400px;
height: 22px;
border: 1px solid #111;
background-color: #292929;
}
#progressBar div {
height: 100%;
color: #fff;
text-align: right;
line-height: 22px; /* same as #progressBar height if we want text middle aligned */
width: 0;
background-color: #0099ff;
}
</style>

<div id="progressBar"><div></div></div>

4

ajax jquery php progress-bar

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Хороший способ будет слушать слушателя события «progress».

Пример:

$.ajax({
type: 'POST', // GET/POST
url: "/", // Some URL
data: {}, // Misc data
beforeSend: function(XMLHttpRequest) // Do the following before sending the request
{
//Upload progress
XMLHttpRequest.upload.addEventListener("progress", function(event) // Add a "progress" listener.
{
if (evt.lengthComputable)
{
var percentComplete = (event.loaded / event.total) * 100;
// You can use this data for your progress bar.
}
}, false);
},
success: function(data)
{
// Here, you can make your progress bar green or something.
}
});

-1