如何在第一个和更新页面成功时调用第二个jQuery.ajax实例 [英] How to call second jQuery.ajax instance on success of first and update page
问题描述
我有一些jQuery是通过点击类'changetag'
的链接触发的。我正在使用 $。ajax()
通过changetag.php更新数据库。
I have some jQuery that is triggered on click of a link with the class 'changetag'
. I'm using $.ajax()
to update the database via changetag.php.
然后我改变了通过在开/关之间切换类来实现链接的视觉外观。代码如下:
I then change the visual appearance of the link by toggling the class between on/off. The code is as follows:
$(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调用,如果以上成功,它将提取数据并更新页面的另一个区域。
Works perfectly. But now I want to add in a second PHP call which will pull data and update another area of the page if the above was successful.
我想要添加的内容是:
$.ajax({
url: "_js/loaddata.php",
success: function(results){
$('#listresults').empty();
$('#listresults').append(results);
}
});
但只是将其添加成功:function(){}似乎不起作用。为了澄清,这里是我正在测试的完整代码:
But just adding it into success: function(){} doesn't seem to be working. To clarify, here is the complete code I'm testing:
$(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脚本都被成功调用并且切换类可以工作,但是拉出的数据不会被写入出于某种原因,#listresults。
The PHP scripts are both called successfully and the toggle class works, but the data pulled is not written to #listresults for some reason.
推荐答案
Ajax调用(默认情况下)是异步。这意味着这段代码:
Ajax calls are (by default) asynchronous. That means that this code:
$("#li_"+I).toggleClass("off on");
element.toggleClass("off on");
return false;
可以在它之前的ajax调用完成之前执行。对于不熟悉ajax和异步代码执行的程序员来说,这是一个常见问题。完成ajax调用后你想要执行的任何内容都必须放入回调,例如你的 success
处理程序:
could be executed before the ajax call preceding it is finished. This is a common problem for programmers who are new to ajax and asynchronous code execution. Anything you want to be executed after the ajax call is done must be put into a callback, such as your success
handler:
$.ajax({
type: "POST",
url: "_js/changetag.php",
data: info,
success: function(){
$("#li_"+I).toggleClass("off on");
element.toggleClass("off on");
}
});
同样,你也可以把第二个ajax调用放在那里:
Likewise, you could put the second ajax call in there as well:
$.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);
}
});
}
});
With jQuery 1.5's Deferred Object, you can make this slicker.
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);
这很好,因为它可以让你取消嵌套回调 - 你可以编写异步执行的代码,但是写得像是同步执行的代码。
This is nice because it lets you un-nest callbacks - you can write code that executes asynchronously, but is written like synchronously-executed code.
这篇关于如何在第一个和更新页面成功时调用第二个jQuery.ajax实例的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!