How to get multiple responses from PHP file via AJAX?

Question

My PHP file doing 2 operations: 1. Submits data from form into db table, 2. Sends email.

What I want to do is to show status messages via ajax. For example, "First operation done, please wait for second" and then when second one will be finished show the next message "Second operation done too". Now my ajax looks like that.

How can I modify it?

//add status data to form
        form.data('formstatus', 'submitting');

        if (validate()) {
            //send data to server for validation
            $.ajax({
                url: formUrl,
                type: formMethod,
                dataType: "json",
                data: formData,
                success: function (data) { 
                    $.notifyBar({
                        cls: data.status,
                        html: data.message
                    });
                    form.data('formstatus', 'idle');
                }
            });

        }

Answer 1

If you've to do two operations that have different execution times, just send two different AJAX queries, and get the responses from them.

Divide your PHP service in two parts. If the second part depends on the first, instead of sending the two requests at the same time, send the second request when the first one returns.

In other words, in your success callback, you're going to notify the user that the first operation has been completed and you proceed to call the second operation, whose success callback will inform that the second operation has been completed.

Answer 2

in the success block you can perform another ajax call. That's the simplest. You can do it to in .success(), .ajaxSucces(), .complete(), or .then() function like this: $.ajax(...).success(...);

ideally you would embed the code in a function, by example

$.ajax({
    url: formUrl,
    type: formMethod,
    dataType: "json",
    data: formData,
    success: function (data) {
        notifyResponse(data); 
        form.data('formstatus', 'idle');
        sendMail();
    }
});

function sendMail() {
    $.get(mailUrl, function(data) {   // or $.post(...
        notifyResponse(data);
    });
}

function notifyResponse(data) {
    $.notifyBar({
        cls: data.status,
        html: data.message
    });
}

Answer 3

Another approach different from the one suggested by stivlo is to use a sort of long polling like the one explained in this answer:

How do I implement basic "Long Polling"?

Not so simple and with more technical problem abaout server configuration.