在两个(或多个)ajax请求成功之后执行函数 [英] Execute a function after two (or more) ajax request succeed
问题描述
我需要执行两个独立的ajax请求，并在两个请求都成功之后执行一个函数.我显然可以发送第一个请求，然后在第一个请求成功时发送第二个请求，最后在第二个请求成功时执行功能.但是有没有办法分别执行它们并在它们都成功时执行功能?
I need to perform two independent ajax requests and a function to be executed after both of them succeed. I can obviously send the first request, then send the second one when the first one succeeds and finally execute the function when the second request succeeds. But is there a way to execute them separately and execute the function when both of them succeed?
即我可能有以下要求:
var jqxhr1 = $.post( "example1.php", function() {
alert( "first success" );
})
var jqxhr2 = $.post( "example2.php", function() {
alert( "second success" );
})
和以下功能:
function myfunction() {
alert( "function success" );
}
推荐答案
在您的问题下有很多评论，最好的方法是使用Promises.如我所见，您正在使用 jQuery ，因此我将使用jQuery发布您的答案.因此，基本设置为:
As many commented under your question the best way is to use Promises. As I see you are using jQuery so I will post you my answer using jQuery. So the basic setup will be:
html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<button id="one">Send 2 ajax</button>
<script src="script.js"></script>
</body>
</html>
example1.php :
<?php
echo json_encode($_POST['button']);
example2.php :
<?php
sleep(5);
echo json_encode($_POST['button']);
和 javascript 文件:
$( document ).ready( function () {
var $button1 = $( '#one' );
$button1.on( 'click', function ( e ) {
e.preventDefault();
$.when(
$.ajax( {
url: "example1.php",
type: "post",
data: { button: "some data" }
} ),
$.ajax( {
url: "example2.php",
type: "post",
data: { button: "some data" }
} ) ).done( function ( a1, a2 ) {
console.log( a1 );
console.log( a2 );
} );
} )
} );
说明:使用 $ .when()当您要等到几个 ajax 请求成功时.因此，在我的示例中，当两个ajax请求成功时， done()在5秒后执行.第一和第二个参数是从第一个和第二个ajax调用返回的值.您可以在上面提供的链接中了解更多有关它的信息.返回的数据是这样的:
Explanation: $.when() is used when you want to wait until several ajax request are successful. So in my example done() is executed after 5 seconds when two ajax request are successful. First and second params is returned values from first and second ajax call. You can read more about it in link I provided above. Returned data is like this:
Array[3]
0:""Some data from AJAX 1""
1:"success"
2:Object
length:3
__proto__:Array[0]
Array[3]
0:""Some data from AJAX 2""
1:"success"
2:Object
length:3
__proto__:Array[0]
example1.php 和 example2.php 非常简单-它们只是将 json 发送回javascript.除了 example2.php 模拟的Ajax响应超时为5秒.
example1.php and example2.php are very simple - they just send json back to javascript. Except that example2.php simulates ajax response timeout of 5 seconds.
PS :上面的代码是有效的示例，我正在本地计算机上运行.
P.S.: Code above is working example, which I'm running on my local machine.
这篇关于在两个(或多个)ajax请求成功之后执行函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
