(Ajax)在另一个Ajax请求成功之后的代码(不在其内部)之后执行一个Ajax请求

时间:2018-09-09 12:54:32

标签: javascript jquery ajax

我有两个Ajax请求,each()的第一个内部和每个外部的第二个。问题在于,第一个请求成功内的代码非常重要,应该在第二个Ajax请求之前执行。

执行代码后,第一个Ajax请求被发送到服务器,但是只有在第二个Ajax请求执行后才能成功执行。

执行顺序:

first ajax
second ajax
success of first ajax
success of second ajax

有没有办法让第二个ajax一直等到第一个ajax成功结束之后再执行?

$(document).on("change",
  ".jsQuestionType",
  function() {

    // alert("The dropdown has been changed.");

    var dropdownList = $(this);
    var optionTypeId = $(dropdownList).val();
    //get the  jsQuestionSection
    var question = $(dropdownList).parent().parent().parent();
    //get  the list of jsQuestionOptions 
    var questionOptions = $(dropdownList).parent().parent().parent().find(".jsQuestionOptions");

    // loop  in all  questionOptions  of the selected question

    $(questionOptions).each(function(i, e) {

      //alert($(e).find("input.jsInputName").attr("questionOptionsId"));
      var optionId = $(e).find("input.jsInputName").attr("questionOptionsId");
      $.ajax({
        url: "/api/QuestionOptions/" + optionId,
        method: "DELETE",
        success: function(data) {
          $(e).remove();

        }
      });
    });
    //End loop

    var questionId = $(question).find("input.jsInputName").attr("questionId");
    // if (questionOptions.length == 0) {
    // create   the new  option  using the  value sent by dropdown 

    $.ajax({
      url: "/api/QuestionOptions/" + optionTypeId + "/" + questionId,
      method: "POST",
      success: function(data) {
        alert(data);
        var d = data;
      }
    });

    //}

  });

1 个答案:

答案 0 :(得分:0)

您可以在循环中制作一个请求承诺数组,并在所有先前的命令都解决后,使用$.when来在循环外调用ajax

var requests = $(questionOptions).map(function(i, e) {

  var optionId = $(e).find("input.jsInputName").attr("questionOptionsId");

  // return ajax promise
  return $.ajax({
    url: "/api/QuestionOptions/" + optionId,
    method: "DELETE",
    success: function(data) {
      $(e).remove();

    }
  });
}).get();

$.when.apply($, requests).then(function(){
  // all the above requests completed
  // do next request

})