我打算调用一个 ajax 函数,并且正在查看 api。我很好奇是否有一个函数可以在等待成功、错误、完成等被调用时执行。
我希望有类似的东西:
$.ajax({ ..., waiting: function(){ //执行一些代码 } });
如果它不在那里,它真的应该。在调用ajax函数之前必须携带这些东西在我看来并不聪明......
waiting 可以轻松执行诸如显示加载 gif 之类的操作。
有什么东西可以做这种功能吗?我似乎找不到它。
您在$.ajax
通话后拥有的任何代码实际上都会在通话开始后立即开始运行。所以,如果你有这样的事情:
$ajax('someurl').done(function() { /*** success function ***/ });
someOtherFunctionCall();
someOtherFunctoinCall()
实际上将在 ajax 调用开始后立即执行,并且无论调用成功/失败都会发生。
尝试这个
jQuery.ajax({
url:"http://www.example.com/",
beforeSend:function(){
//show loading gif
},
success:function(resp){
//handle response from server
//hide or remove loading gif
},
error:function(msg){
//show error message
}
});
您应该在启动请求的同时显示加载 GIF。除了 , 之外,没有真正的方法可以知道 AJAX 调用的实际进度,readyState
这就是onreadystatechange
目的(在纯 JS 中,我不知道/关心它在 jQuery 中的等价物是什么)。
在 ajax 调用完成之前显示微调器很容易。这是如何完成的示例:
loading = {
count: 0
};
loading.finish = function() {
this.count--;
if (this.count==0) this.$div.hide();
};
//
loading.start = function() {
this.count++;
if (!this.$div) {
var html = '<div style="position: fixed;z-index:100;left:0;top:0;right:0;bottom:0;background: black;opacity: 0.6;">';
html += '<table width=100% height=100%>';
html += '<tr><td align=center valign=middle>';
html += '<img src=img/loading.gif>';
html += '</td></tr>';
html += '</table></div>';
this.$div=$(html);
this.$div.prependTo('body');
}
setTimeout(function(){
if (loading.count>0) loading.$div.show();
}, 500);
};
// the function to call
askUrl = function(url, success) {
var httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = function() {
if (httpRequest.readyState === 4) {
if (httpRequest.status === 200) {
success(msg);
}
loading.finish();
}
};
loading.start();
httpRequest.open('GET', url);
httpRequest.send();
};
如果您调用 askUrl 并且服务器在 500 毫秒内没有响应,则屏幕将变灰并显示一个微调器。
由于它是一个简短的代码,并且它实际上取决于所需的结果,我不确定这是否应该在 jQuery 甚至插件中可用。
我在这里得到了我的 gif 微调器。
最好的方法是对 ajax 请求使用 beforeSend 和 complete 函数。
$.ajax({
.. Your ajax settings..
success : function(result){
// do what you want with data here
},
beforeSend : function(){
// Show a ajax gif here
},
complete : function(){
// Hide the ajax gif here
}
});
发送ajax请求后立即触发beforeSend函数。当它超出成功函数时触发完成函数。因此您可以在请求完成时通知用户。