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