Make sure first ajax function finishes before second one

Question

I have a JavaScript function that makes two consecutive Ajax requests using jQuery. I want to make sure that the first request has loaded before the second function is called. Is there a way I can do this?

Answer 1

Either specify async: false in the $.ajax options, or make the second ajax call in the complete callback of the first call.

Answer 2

$.post("script1.php", {data:"val"}, function(response) {
  $.post("script2.php", {data:response}, function(results) {
    // this second call will be initialized when the first finishes
  });
});