我有一些单击与类的链接时触发的jQuery 'changetag'。我$.ajax()用来通过changetag.php更新数据库。
'changetag'
$.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); } });
但是仅仅将其添加到成功中: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脚本都可以成功调用,并且toggle类也可以工作,但是由于某种原因,提取的数据未写入#listresults。
Ajax调用(默认情况下)是 异步的 。这意味着该代码:
$("#li_"+I).toggleClass("off on"); element.toggleClass("off on"); return false;
可以在其前面的ajax调用完成之前执行。对于刚接触Ajax和异步代码执行的程序员来说,这是一个普遍的问题。在ajax调用完成后,您要执行的所有操作都必须放入 回调中 ,例如您的success处理程序:
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);
这很不错,因为它可以使您取消嵌套回调-您可以编写异步执行的代码,但编写的方式类似于同步执行的代码。