有没有办法等待AJAX​​响应并停止执行?

这是我想要执行的一些代码。 我想等待AJAX​​响应,所以我可以从服务器返回一些东西。 有没有办法实现这个目标?

function functABC(){ $.ajax({ url: 'myPage.php', data: {id: id}, success: function(data) { return data; } }); //Wait for AJAX (???) } var response = functABC(); 

所有Ajax调用都可以异步完成(使用回调函数,这将是’success’键后指定的函数)或同步 – 有效阻塞和等待服务器应答。 要获得同步执行,您必须指定

 async: false 

像这里描述的那样

但请注意,在大多数情况下,异步执行(通过成功回调)就可以了。

简单的答案是关闭async 。 但这是错误的做法。 正确的答案是重新思考如何编写其余的代码。

而不是写这个:

 function functABC(){ $.ajax({ url: 'myPage.php', data: {id: id}, success: function(data) { return data; } }); } function foo () { var response = functABC(); some_result = bar(response); // and other stuff and return some_result; } 

你应该这样写:

 function functABC(callback){ $.ajax({ url: 'myPage.php', data: {id: id}, success: callback }); } function foo (callback) { functABC(function(data){ var response = data; some_result = bar(response); // and other stuff and callback(some_result); }) } 

也就是说,不是返回结果,而是传递需要作为回调的代码。 正如我所示,回调可以嵌套到与函数调用一样多的级别。


快速解释为什么我说关闭异步是错误的:

关闭异步将在等待ajax调用时冻结浏览器。 用户无法点击任何内容,无法滚动,在最坏的情况下,如果用户内存不足,有时当用户将窗口拖离屏幕并再次拖入时,他会看到空格,因为浏览器已冻结且无法重绘。 对于像IE7这样的单线程浏览器,情况更糟:所有网站都冻结了! 遇到这种情况的用户可能会认为您的网站存在问题。 如果你真的不想异步这样做,那么只需在后端进行处理并刷新整个页面。 它至少会觉得没有错误。

如果你可以使用promises,你也可以使用promise链。

 function functABC() { return new Promise(function(resolve, reject) { $.ajax({ url: 'myPage.php', data: {id: id}, success: function(data) { resolve(data) // Resolve promise and go to then() }, error: function(err) { reject(err) // Reject the promise and go to catch() } }) } } functABC().then(function(data) { // Run this when your request was successful console.log(data) }).catch(function(err) { // Run this when promise was rejected via reject() console.log(err) }) 

使用async:false属性以及url和数据。 这将有助于立即执行ajax调用,并且您可以从服务器获取和使用数据。

 function functABC(){ $.ajax({ url: 'myPage.php', data: {id: id}, async:false success: function(data) { return data; } }); } 

方法1:

 function functABC(){ $.ajax({ url: 'myPage.php', data: {id: id}, success: function(data) { return data; }, complete: function(){ // do the job here } }); } var response = functABC(); 

方法2

 function functABC(){ $.ajax({ url: 'myPage.php', data: {id: id}, async: false, success: function(data) { return data; } }); // do the job here } 

无需等待Ajax响应。 您可以在应用程序的开头部分加载数据:

 function functABC(){ $.ajax({ url: 'myPage.php', data: {id: id}, success: function(data) { sessionStorage.setItem('mydata', data); } }); } 

然后,当window.load事件被触发时,您的数据将可用:

 alert(sessionStorage.getItem('mydata'));