依次加载AJAX调用

Question

我有以下3个AJAX函数，问题是它先加载sessionAllCoursePage3，然后再加载sessionAllCoursePage2，然后再加载sessionAllCoursePage1，我想反过来。 我想确保先加载page1，然后再加载页面2，页面3等。

// Retrieve last 9 session
$.ajax({
    type: "POST",
    data: { run: true, providerName: $('#providerName').val() },
    url: '/app/functions/sessionAllCoursePage1.php',
    cache: false,
    success: function(response) {
        // Response is value returned from php
        $('#contentPage1').html(response);
        return false;
    }
});

// Retrieve the next 9 session

$.ajax({
    type: "POST",
    data: { run: true, providerName: $('#providerName').val() },
    url: '/app/functions/sessionAllCoursePage2.php',
    cache: false,
    success: function(response) {
        // Response is value returned from php
        $('#contentPage2').html(response);
        return false;
    }
});

// Retrieve the next 9 session

$.ajax({
    type: "POST",
    data: { run: true, providerName: $('#providerName').val() },
    url: '/app/functions/sessionAllCoursePage3.php',
    cache: false,
    success: function(response) {
        // Response is value returned from php
        $('#contentPage3').html(response);
        return false;
    }
});

Answer 1

我建议您将其与诺言联系起来：

// Retrieve last 9 session
$.ajax({
    type: "POST",
    data: {
        run: true,
        providerName: $('#providerName').val()
    },
    url: '/app/functions/sessionAllCoursePage1.php',
    cache: false
}).then(function(response) {

    $('#contentPage1').html(response);

    return $.ajax({
        type: "POST",
        data: {
            run: true,
            providerName: $('#providerName').val()
        },
        url: '/app/functions/sessionAllCoursePage2.php',
        cache: false
}).then(function(response) {

    $('#contentPage2').html(response);

    return $.ajax({
        type: "POST",
        data: {
            run: true,
            providerName: $('#providerName').val()
        },
        url: '/app/functions/sessionAllCoursePage3.php',
        cache: false
    });    
}).then(function(response) {
    $('#contentPage3').html(response);
});

---

或者，使用更多共享代码：

function ajaxCommon(url, resultId) {
    return $.ajax({
        type: "POST", 
        url: url, 
        data: {
            run: true,
            providerName: $('#providerName').val()
        },
        cache: false
    }).then(function(result) {
        $("#" + resultId).html(result);
    });
}

ajaxCommon('/app/functions/sessionAllCoursePage1.php', 'contentPage1').then(function() {
    return ajaxCommon('/app/functions/sessionAllCoursePage2.php', 'contentPage2');
}).then(function() {
    return ajaxCommon('/app/functions/sessionAllCoursePage3.php', 'contentPage3');
});

---

或者，更多的表/循环驱动：

function ajaxCommon(url, resultId) {
    return $.ajax({
        type: "POST", 
        url: url, 
        data: {run: true, providerName: $('#providerName').val()},
        cache: false
    }).then(function(result) {
        $("#" + resultId).html(result);
    });
}

[1,2,3].reduce(function(p, item) {
    return p.then(function() {
        return ajaxCommon('/app/functions/sessionAllCoursePage' + item + '.php', 'contentPage' + item);
    });
}, Promise.resolve());

Answer 2

您可以将Array.prototype.shift() ， String.prototype.match()与Regexp /\\d/配合使用以匹配url中的数字字符.then()

    function request(url) {
      return $.ajax({
              type: "POST",
              data: {run: true, providerName: $('#providerName').val()},
              url: url,
              cache:false,
              success: function (response) {
                $('#contentPage' + url.match(/\d/)[0]).html(response);
              }
            });
    }

    var urls = ['/app/functions/sessionAllCoursePage1.php'
               , '/app/functions/sessionAllCoursePage2.php'
               , '/app/functions/sessionAllCoursePage3.php'];

    request(urls.shift())
    .then(function re() {
      if (urls.length) {
        request(urls.shift()).then(re)
      }
    })
    // can use `.catch()` here at jQuery 3.0+
    .fail(function(jqxhr, textStatus, errorThrown) {
      // handle error
      console.log(errorThrown);
    });

plnkr http://plnkr.co/edit/fREO6Jzw65gq2s3jrwjp?p=preview

Answer 3

只需将您的异步代码放入某些请求回调中即可（例如成功）。 说教：

var firstRequestOptions = {
  success: function () {
    secondRequest(); 
  }
};
var secondRequestOptions = {
  success: function () {
    thirdRequest(); 
  }
};
var thirdRequestOptions = {
  success: function () {
    firstRequest(); 
  }
};
var firstRequest = function () {
  console.log('request 1'); 
  $.ajax(firstRequestOptions); 
};
var secondRequest = function () { 
  console.log('request 2'); 
  $.ajax(secondRequestOptions);
};
var thirdRequest = function () { 
  console.log('request 3'); 
  $.ajax(thirdRequestOptions); 
};

然后：

firstRequest();

日志应为：

> request 1
> request 2
> request 3
> request 1
> request 2
...