Javascript 如何在第一个和更新页面成功时调用第二个 jQuery.ajax 实例
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5486934/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to call second jQuery.ajax instance on success of first and update page
提问by Paul
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.
我有一些 jQuery，它是在点击类的链接时触发的'changetag'。我正在使用$.ajax()通过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;
});
});
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.
完美运行。但是现在我想添加第二个 PHP 调用，如果上述操作成功，它将提取数据并更新页面的另一个区域。
What I'm trying to add is:
我想补充的是：
$.ajax({
url: "_js/loaddata.php",
success: function(results){
$('#listresults').empty();
$('#listresults').append(results);
}
});
But just adding it into success: function(){} doesn't seem to be working. To clarify, here is the complete code I'm testing:
但只是将其添加到成功中： 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;
});
});
The PHP scripts are both called successfully and the toggle class works, but the data pulled is not written to #listresults for some reason.
PHP 脚本都被成功调用并且切换类工作，但是由于某种原因，拉取的数据没有写入#listresults。
回答by Matt Ball
Ajax calls are (by default) asynchronous. That means that this code:
Ajax 调用（默认情况下）是异步的。这意味着这段代码：
$("#li_"+I).toggleClass("off on");
element.toggleClass("off on");
return false;
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 successhandler:
可以在它之前的 ajax 调用完成之前执行。对于不熟悉ajax和异步代码执行的程序员来说，这是一个常见的问题。在 ajax 调用完成后要执行的任何内容都必须放入callback 中，例如您的success处理程序：
$.ajax({
type: "POST",
url: "_js/changetag.php",
data: info,
success: function(){
$("#li_"+I).toggleClass("off on");
element.toggleClass("off on");
}
});
Likewise, you could put the second ajax call in there as well:
同样，您也可以将第二个 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);
}
});
}
});
With jQuery 1.5's Deferred Object, you can make this slicker.
使用 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);
This is nice because it lets you un-nest callbacks - you can write code that executes asynchronously, but is written like synchronously-executed code.
这很好，因为它可以让您取消嵌套回调 - 您可以编写异步执行的代码，但编写方式类似于同步执行的代码。
回答by Patrick D
Deprecation Notice: The jqXHR.success(), jqXHR.error(), and jqXHR.complete() callbacks are removed as of jQuery 3.0. You can use jqXHR.done(), jqXHR.fail(), and jqXHR.always() instead. https://api.jquery.com/jQuery.ajax/#jqXHR
弃用通知：jqXHR.success()、jqXHR.error() 和 jqXHR.complete() 回调从 jQuery 3.0 开始被移除。您可以改用 jqXHR.done()、jqXHR.fail() 和 jqXHR.always()。 https://api.jquery.com/jQuery.ajax/#jqXHR
