如何在AJAX表单提交请求期间显示实时脚本输出？

Question

How to show "Live Feedback" on a script using jQuery?

I have a button that I use to submit a form for processing. Processing takes a long time. I want to have a <div id="progress"></div> where I show live progress report of what order processing script is doing. If all goes well I want to redirect to the View Order script, and if not, just show the progress report (not redirect to view order)

How? Currently I have this:

$("#placeorderbutton").click(function(e) {
    e.preventDefault();
    this.innerHTML = 'Placing Order...';
    this.disabled = true; 
    $.ajax({
        type: 'post',
        url: 'process_order.php',
        data: $('form#order').serialize(),
        success: function(data) {
            $("#main").load('view_order.php');            
        }
    });
}); 

and even though I have print statements in my process_order file, they are not being displayed anywhere on the screen. Well, of course not ... I don't know how to build my jQuery/AJAX to make them show.

I am not sure how to proceed.

Answer 1

You would need to start the long process and then start a timer to poll the status. Keep in mind it doesn't take much for this to become more expensive than it's worth.

$("#placeorderbutton").click(function(e) {
    e.preventDefault();
    this.innerHTML = 'Placing Order...';
    this.disabled = true; 
    $.ajax({
        type: 'post',
        url: 'process_order.php',
        data: $('form#order').serialize(),
        success: function(data) {
            $("#main").load('view_order.php');            
        }
    });
    setTimer($.ajax({
        type: 'post',
        url: 'view_order.php',
        data: $('form#order').serialize(),
        success: function(data) {
            $("#main").append(data);            
        }
    }), 30000);  //check every 30 Seconds
});