如何在第一页和更新页成功时调用第二个jQuery.ajax实例
我有一些jQuery是在点击'changetag'类的链接时触发的。我正在通过changetag.php使用$.ajax()更新数据库。
然后，我通过在打开/关闭之间切换类来更改链接的视觉外观。代码如下：
$(function() {
$(".changetag").click(function(){
var element = $(this);
var I = element.attr("id");
var info = 'switch_tag=' + I;
$.ajax({
type: "POST",
url: "_js/changetag.php",
data: info,
success: function(){}
});
$("#li_"+I).toggleClass("off on");
element.toggleClass("off on");
return false;
});
});效果很好。但是现在我想添加第二个PHP调用，如果上面的操作成功，它将拉取数据并更新页面的另一个区域。
我想要添加的是：
$.ajax({
url: "_js/loaddata.php",
success: function(results){
$('#listresults').empty();
$('#listresults').append(results);
}
});但是仅仅将它添加到success中: function(){}似乎不起作用。为了澄清，下面是我正在测试的完整代码：
$(function() {
$.ajaxSetup ({cache: false});
$(".changetag").click(function(){
var element = $(this);
var I = element.attr("id");
var info = 'switch_tag=' + I;
$.ajax({
type: "POST",
url: "_js/changetag.php",
data: info,
success: function(){
$.ajax({
url: "_js/loaddata.php",
success: function(results){
$('#listresults').empty();
$('#listresults').append(results);
}
});
}
});
$("#li_"+I).toggleClass("off on");
element.toggleClass("off on");
return false;
});
});PHP脚本都被成功调用，切换类也正常工作，但是由于某种原因，拉取的数据没有写入#listresult。
回答 2
Stack Overflow用户
发布于 2011-03-30 21:51:02
Ajax调用(缺省情况下)是异步。这意味着这段代码：
$("#li_"+I).toggleClass("off on");
element.toggleClass("off on");
return false;可以在之前的ajax调用完成之前执行。对于不熟悉ajax和异步代码执行的程序员来说，这是一个常见的问题。在ajax调用完成后，您想要执行的任何东西都必须放入回调处理程序中，比如success处理程序：
$.ajax({
type: "POST",
url: "_js/changetag.php",
data: info,
success: function(){
$("#li_"+I).toggleClass("off on");
element.toggleClass("off on");
}
});同样，您也可以将第二个ajax调用放入其中：
$.ajax({
type: "POST",
url: "_js/changetag.php",
data: info,
success: function(){
$("#li_"+I).toggleClass("off on");
element.toggleClass("off on");
$.ajax({
url: "_js/loaddeals_v2.php",
success: function(results){
$('#listresults').empty();
$('#listresults').append(results);
}
});
}
});有了jQuery 1.5的Deferred Object，你就可以让这一切变得更圆滑。
function firstAjax() {
return $.ajax({
type: "POST",
url: "_js/changetag.php",
data: info,
success: function(){
$("#li_"+I).toggleClass("off on");
element.toggleClass("off on");
}
});
}
// you can simplify this second call and just use $.get()
function secondAjax() {
return $.get("_js/loaddata.php", function(results){
$('#listresults').html(results);
});
}
// do the actual ajax calls
firstAjax().success(secondAjax);这很好，因为它允许您取消嵌套回调-您可以编写异步执行的代码，但编写方式类似于同步执行的代码。
Stack Overflow用户
发布于 2020-03-29 14:42:26
弃用通知：从jQuery 3.0起，删除了jqXHR.success()、jqXHR.error()和jqXHR.complete()回调。您可以改用jqXHR.done()、jqXHR.fail()和jqXHR.always()。https://api.jquery.com/jQuery.ajax/#jqXHR
https://stackoverflow.com/questions/5486934
复制相似问题
腾讯云开发者
