Is there a better way to serially submit multiple AJAX requests?
- by friedo
I have a page with multiple forms that I submit via Ajax POSTs serially. At first, I tried using synchronous XHR requests, but this causes the browser to lock up for the duration of the request, and breaks my DOM-manipulation effects, which is unacceptable. So the pattern I ended up using is basically this:
var fcount = 0; // incremented for each form to be submitted
function submit_form( num ) {
var fdata = { ... }; // data from form # num
$.ajax( { async: true,
url: '/index.cgi',
data: fdata,
type: 'POST',
success: function() {
if ( num < fcount ) {
submit_form( ++num );
}
}
} );
}
$( '#submit_form_btn' ).click( function() { submit_form( 1 ) } );
The recursion strikes me as a bit of an ugly solution to what is essentially an iterative problem. Is there a cleaner or more elegant way that this could be handled?
