在ajax回调函数的每个循环后追加输出

Question

It's been more than 2 hours trying to find an optimal way to display the result rendered by an ajax call back function , Let me explain what i exactly want to do to better understand ...

I have a button "send" , on click event I defined a function that sends a $category_id to another page , where then I grab all the recipients from the database and send for each an Email. Now the whole process is working fine , but after each loop :

(foreach ($recipients as $recipient))
{send_mail();
echo "email sent successfully to ....";} 

I'm returning an echo statement telling that the email was correctly sent to that recipient . The Javascript function is defined to append those echo results in a div , but instead of displaying every statement after getting rendered , it gathers them all and display them at once .

$.ajax({
                async: true,
                url: 'send_emails.php?category='+category,
                success: function(r){
                    $('#status').append(r); //this happens all at once
                                    }
                }); 

Is there a better idea to reach my goal ?

thanks in advance

Answer 1

The Success event of an ajax called is triggered when the XHR status changes to 200 (successful). This only happens when the back-end is done processing.

What you need is to check is the XHR readyState attribute. Which is set to '3' during processing of the request. You can then send updates from your PHP script to the webpage.

Here is a good blog that explains how to do it