![](/img/trans.png)
[英]jQuery Ajax beforesend, success and error with axios
[英]Jquery Ajax beforeSend and success,error & complete
我有多个 ajax 函数的问题,其中第二个ajax 帖子的beforeSend
在第一个ajax 的complete
功能之前执行。
我在发送之前添加到占位符的加载类适用于第一个 ajax 调用。 然而,在第一个 ajax 请求完成后不久,该类将被删除,并且永远不会在第二次和进一步的调用中再次追加(记住递归调用)。
调试时发现是先调用了第二次ajax调用的beforeSend
函数,后调用了第一个ajax调用的complete
函数。 这很明显,因为从第一个 ajax 调用插入页面的返回数据启动了第二个调用。
简而言之,它是混合的。 有什么办法可以解决这个问题吗?
功能代码如下
function AjaxSendForm(url, placeholder, form, append) {
var data = $(form).serialize();
append = (append === undefined ? false : true); // whatever, it will evaluate to true or false only
$.ajax({
type: 'POST',
url: url,
data: data,
beforeSend: function() {
// setting a timeout
$(placeholder).addClass('loading');
},
success: function(data) {
if (append) {
$(placeholder).append(data);
} else {
$(placeholder).html(data);
}
},
error: function(xhr) { // if error occured
alert("Error occured.please try again");
$(placeholder).append(xhr.statusText + xhr.responseText);
$(placeholder).removeClass('loading');
},
complete: function() {
$(placeholder).removeClass('loading');
},
dataType: 'html'
});
}
数据包含以下 javascript/jquery 片段,它检查并启动另一个 ajax 请求。
<script type="text/javascript">//<!--
$(document).ready(function() {
$('#restart').val(-1)
$('#ajaxSubmit').click();
});
//--></script>
也许您可以尝试以下操作:
var i = 0;
function AjaxSendForm(url, placeholder, form, append) {
var data = $(form).serialize();
append = (append === undefined ? false : true); // whatever, it will evaluate to true or false only
$.ajax({
type: 'POST',
url: url,
data: data,
beforeSend: function() {
// setting a timeout
$(placeholder).addClass('loading');
i++;
},
success: function(data) {
if (append) {
$(placeholder).append(data);
} else {
$(placeholder).html(data);
}
},
error: function(xhr) { // if error occured
alert("Error occured.please try again");
$(placeholder).append(xhr.statusText + xhr.responseText);
$(placeholder).removeClass('loading');
},
complete: function() {
i--;
if (i <= 0) {
$(placeholder).removeClass('loading');
}
},
dataType: 'html'
});
}
这样,如果在complete
语句之前调用beforeSend
语句, i
将大于 0,因此它不会删除该类。 那么只有最后一次调用才能删除它。
我无法测试它,让我知道它是否有效。
使用jQuery 的 promise API实际上要容易得多:
$.ajax(
type: "GET",
url: requestURL,
).then((success) =>
console.dir(success)
).failure((failureResponse) =>
console.dir(failureResponse)
)
或者,您可以将bind
函数传递给每个结果回调; 参数的顺序是:( (success, failure)
。 只要你指定一个至少有 1 个参数的函数,你就可以访问响应。 因此,例如,如果您想检查响应文本,您可以简单地执行以下操作:
$.ajax(
type: "GET",
url: @get("url") + "logout",
beforeSend: (xhr) -> xhr.setRequestHeader("token", currentToken)
).failure((response) -> console.log "Request was unauthorized" if response.status is 401
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.