-
-
Save sohelrana820/63f029d3aa12936afbc50eb785c496c0 to your computer and use it in GitHub Desktop.
| <?php | |
| /** | |
| * Catch php output buffering data over jQuery AJAX | |
| * | |
| * @author: Sohel Rana ([email protected]) | |
| * @author url: https://blog.sohelrana.me | |
| * @link: https://blog.sohelrana.me/catch-php-output-buffering-data-jquery-ajax/ | |
| * @licence MIT | |
| */ | |
| set_time_limit(0); | |
| ob_implicit_flush(true); | |
| ob_end_flush(); | |
| for ($counter = 0; $counter < 10; $counter++) { | |
| //Hard work! | |
| sleep(1); | |
| $processed = ($counter + 1) * 10; //Progress | |
| $response = array('message' => $processed . '% complete. server time: ' . date("h:i:s", time()), 'progress' => $processed); | |
| echo json_encode($response); | |
| } | |
| sleep(1); | |
| $response = array('message' => 'Complete', 'progress' => 100); | |
| echo json_encode($response); |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Title</title> | |
| <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" rel="stylesheet"/> | |
| </head> | |
| <body> | |
| <br/><br/><br/><br/> | |
| <div class="col-lg-8 col-lg-offset-2"> | |
| <div class="progress"> | |
| <div class="progress-bar" role="progressbar" aria-valuenow="70" | |
| aria-valuemin="0" aria-valuemax="100" style="width:0"> | |
| <span id="fullResponse"></span> | |
| </div> | |
| </div> | |
| <h4 id="progressTest"></h4> | |
| </div> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.js" type="text/javascript"></script> | |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script> | |
| <script> | |
| var lastResponseLength = false; | |
| var ajaxRequest = $.ajax({ | |
| type: 'post', | |
| url: 'catch-php-output-buffering-data-jquery-ajax.php', | |
| data: {}, | |
| dataType: 'json', | |
| processData: false, | |
| xhrFields: { | |
| // Getting on progress streaming response | |
| onprogress: function(e) | |
| { | |
| var progressResponse; | |
| var response = e.currentTarget.response; | |
| if(lastResponseLength === false) | |
| { | |
| progressResponse = response; | |
| lastResponseLength = response.length; | |
| } | |
| else | |
| { | |
| progressResponse = response.substring(lastResponseLength); | |
| lastResponseLength = response.length; | |
| } | |
| var parsedResponse = JSON.parse(progressResponse); | |
| $('#progressTest').text(progressResponse); | |
| $('#fullResponse').text(parsedResponse.message); | |
| $('.progress-bar').css('width', parsedResponse.progress + '%'); | |
| } | |
| } | |
| }); | |
| // On completed | |
| ajaxRequest.done(function(data) | |
| { | |
| console.log('Complete response = ' + data); | |
| }); | |
| // On failed | |
| ajaxRequest.fail(function(error){ | |
| console.log('Error: ', error); | |
| }); | |
| console.log('Request Sent'); | |
| </script> | |
| </body> | |
| </html> |
SyntaxError: JSON.parse: unexpected non-whitespace character after JSON data at line 1 column 64 of the JSON data[Learn More]
You're getting this error because of ur web server does not support streams
I've tried it on my nginx proxy and got the same error
then I tried on apache provided via xampp and everything worked well
not working at all, the js call waits till php file is done and then outputs the whole data
not working in production server, but in wamp everything worked well,
any ideas?
When using nginx you need to disable fastcgi_buffering with header('X-Accel-Buffering: no');
Disabling the cache is useful to avoid caching the response header("Cache-Control: no-cache, must-revalidate");
Thanks a ton!
It's Not working for me. I am having
foreachloop and i have used exactly what u diid in this code. :-(My Json display like:
{"name":"test1"}{"name":"test2"}{"name":"test3"}{"message":"processover"}
That's not valid JSON.
does not work for me.
SyntaxError: JSON.parse: unexpected non-whitespace character after JSON data at line 1 column 64 of the JSON data[Learn More]
any ideas?