Обратный вызов в jQuery
У меня есть следующий код, в котором используется функция ajaxSuccess(). Проблема, с которой я сталкиваюсь, заключается в том, что всякий раз, когда запрос AJAX завершается успешно, а jQuery запускает событие the ajaxSuccess, выполняются все методы ajaxSuccess().
Я думаю, что лучшим решением будет передать обратный вызов, но я не могу понять, как я могу его использовать, поскольку я новичок в этом.
('#drop1').on('select2:select', (e) => {
const selectedMake = e.params.data;
utils.emptySelect2('#drop2');
utils.emptySelect2('#drop3');
utils.populateSelect2(`apiURL`, '#drop2');
$(document).ajaxSuccess(() => {
$('#drop3').select2('close');
$('#drop2').select2('open');
});
});
Вызов AJAX:
populateSelect2(url, element, key) {
$.get(url)
.done((res) => {
if (res) {
let data = $.map(key ? res[key] : res, (obj) => {
obj.text = obj.name;
return obj;
});
data = sortBy(data, 'name');
$(element).select2({
placeholder: 'please enter',
data
});
}
})
.fail(() => {
this.showError(`Failed to call ${url}`);
});
}
Вы определяете новый обработчик ajaxSuccess() каждый раз, когда срабатывает событие select2:select. Это само по себе проблема. Если вы хотите, чтобы логика в ajaxSuccess срабатывала только для определенных запросов AJAX, вам нужно будет предоставить функцию обратного вызова. Как вы это сделаете, зависит от того, как вы выполняете вызовы в функции populateSelect2. Если вам нужна помощь с этим, нам нужно увидеть код этой функции.
Не могли бы вы поделиться своим кодом запроса ajax?
просто добавил код вызова ajax
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
Когда вы используете JQuery.ajaxSuccess (), вы «ловите» все запросы, сделанные вашим браузером. Если вы хотите получить ответ, в частности, на один звонок (что часто бывает), вам необходимо использовать обратный вызов.
Например :
$.ajax({
type:"POST",
url:"/myUrl"
success:function(data){
alert(data);
}
});
Параметр data, имеющий ответ от сервера.
P.S: вы можете заменить обратный вызов успеха любой функцией, которую хотите использовать.
Я только что поделился своим вызовом ajax выше, я понятия не имею, как использовать обратный вызов успеха
Внутри метода utils.populateSelect2 вы будете вызывать вызовы ajax для получения данных. Там вы можете поддерживать обратные вызовы успеха или неудачи. Если вы напрямую подключаете метод ajaxSuccess к объекту документа, тогда для всех последующих вызовов ajax будет вызываться ваш метод ajaxSuccess.
$.ajax({
url: '??',
dataType: '??',
success: function (data, status) {
console.info(data.responseText);
},
error: function(jqXHR, textStatus, errorThrown) {
}
})
Спасибо за комментарий. Я просто поделился приведенным выше кодом ajax. Я не знаю, как передать обратный вызов utils.populateSelect2 ()
Фрагмент вызова jQuery ajax. Зарегистрируйте успешный и ошибочный обратный вызов, чтобы получить ответ API.
$.ajax({
type: 'GET',
url: "https://reqres.in/api/users/2",
dataType:"json",
success: function(data){
console.info("success");
},
error:function(error){
console.info("error");
}
});
Если я вас правильно понял, вы можете сделать что-то вроде этого:
('#drop1').on('select2:select', (e) => {
const selectedMake = e.params.data;
utils.emptySelect2('#drop2');
utils.emptySelect2('#drop3');
utils.populateSelect2(
`apiURL`,
'#drop2',
// success callback
(res) => console.info(res),
// fail callback
() => console.info(fail)
);
$(document).ajaxSuccess(() => {
$('#drop3').select2('close');
$('#drop2').select2('open');
});
});
populateSelect2(url, element, key, success, fail) {
$.get(url)
.done((res) => {
// ...
success(res);
})
.fail(() => {
// ...
fail();
});
}
.ajaxSuccess- это глобальный обработчик, который срабатывает при каждом успешном выполнении каждого вызова ajax. Вы можете передать объектajaxв select2, который может включать параметр.success, или вы можете использовать цепочку.done()объекта ajax. select2.org/data-sources/ajax