加载Ajax一个接一个地调用

Question

i具有以下3个AJAX函数，问题在于，它首先加载sessionallCoursePage3，然后sessionallCoursePage2然后sessionallCoursePage1，我想倒数。我想确保第1页首先加载，然后是第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

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

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
...

Answer 3

您可以使用 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