Jquery Ajax beforeSend и успех, ошибка и полная
У меня есть проблема в ajax-функции, где beforeSend второго сообщения ajax выполняется перед полной: функцией первого ajax. Класс загрузки, который я добавляю в placehorder перед отправкой, работает для первого вызова ajax. Однако вскоре после завершения первого запроса ajax класс будет удален и никогда не будет добавлен снова на второй и дальнейшие вызовы (помните рекурсивные вызовы).
Во время отладки это показывает, что функция beforeSend вторых вызовов ajax вызывается сначала, а полная функция первого вызова ajax вызывается позже. Это очевидно, потому что возвращаемые данные, вставленные на страницу с первого вызова 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>
Ответы
Ответ 1
Возможно, вы можете попробовать следующее:
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'
});
}
Таким образом, если оператор beforeSend
, если он вызывается перед оператором complete
i
, будет превышать 0, поэтому он не удалит класс. Тогда только последний вызов сможет удалить его.
Я не могу проверить это, дайте мне знать, работает ли это или нет.
Ответ 2
На самом деле это намного проще с API-интерфейсом jQuery:
$.ajax(
type: "GET",
url: requestURL,
).then((success) =>
console.dir(success)
).failure((failureResponse) =>
console.dir(failureResponse)
)
В качестве альтернативы вы можете передавать функции bind
для каждого обратного вызова результата; порядок параметров: (success, failure)
. Пока вы указываете функцию с хотя бы одним параметром, вы получаете доступ к ответу. Так, например, если вы хотите проверить текст ответа, вы можете просто сделать:
$.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