一个接一个地加载AJAX调用

时间:2016-06-25 21:00:08

标签: javascript jquery ajax

我有以下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;
    }
});

3 个答案:

答案 0 :(得分:4)

我建议你用承诺链接他们:

// 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());

答案 1 :(得分:1)

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

答案 2 :(得分:1)

只需将异步代码置于某个请求回调中(例如成功)。说教:

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