jquery ajax progress bar с циклом в php

382

12 февраля 2017, 12:15

Всем привет! Пытаюсь использовать jQuery AJAX для моих целей, но столкнулся с проблемой:

$('#go').on('click',function(evt){ 
    evt.preventDefault(); 
    $(this).hide(); 
    $('#progress-bar').show(); 
 
    console.log('starting ajax request'); 
    $.ajax({ 
        xhr: function () { 
            var xhr = new window.XMLHttpRequest(); 
            xhr.addEventListener('progress', function (e) { 
                console.log(e); 
                if (e.lengthComputable) { 
                    $('.progress-bar').css('width', '' + (100 * e.loaded / e.total) + '%'); 
                } 
            }); 
            return xhr; 
        }, 
 
        type: 'POST', 
        url: 'core.php', 
        data: {}, 
        complete: function (response, status, xhr) { 
            console.log(response); 
            $('.desc').html(response.responseText); 
        } 
    }); 
 
});

.container-fluid { 
	padding-top: 20px; 
} 
#progress-bar { 
	margin-top: 20px; 
	display: none; 
	width: 100%; 
}

<html> 
<head> 
	<link rel="stylesheet" href="style.css"> 
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
	<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
</head> 
  <body> 
	<div class="container-fluid"> 
		<a class="btn btn-default" id="go">Let's go!</a> 
		<div class="progress" id="progress-bar"> 
			<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%"> 
 
			</div> 
		</div> 
		<div class="desc"> 
 
		</div> 
	</div> 
	<script src="ajax.js"></script> 
</body> 
</html>

В core.php мне нужно провести будет некоторые операции над массивами. Предположим, это будет:

<?php
$sum = 0;
for ($i=0; $i<9999; $i++) {
    $sum++;
}
?>

Мой javascript не работает. Знаю, что это из-за того, что e.lengthComputable = false. Также узнал, что core.php headers содержат Content-Length: 0. Ок. Но что я должен сделать, чтоб мой AJAX запрос работал верно и работал динамический прогресс бар? Спасибо.

Answer 1

Content-Length: 0 потому что из PHP нет никакого вывода. поставьте типо echo "прогресс: ".$progress; ну или что там у вас нужно от контроллера вернуть чтобы в html затем подставить...

В общем то что хотите лучше через websockets сделать, чтобы сам сервер пушал обновления когда у него прогресс, и лучше это делать на node.js. Есть реализации сокетов и под php, но я правда заглянул разок как это сделано там, пришел в ужас и предпочитаю использовать node.js. К тому же нагружать контроллеры PHP интенсивными вычислениями не рекомендуется наукой - если это скажем магазин, вы его положите рано или поздно, когда даже несколько десятков посетителей запустят нечто подобное. Для серверов с интенсивными вычислениями обычно берут Java EE, ставят большую железку. PHP, да и Node.js по большому счету, для этого не годится.