@sanok_ps
Веб-разработчик, php-бекенд, Вордпресс

Как выполнять несколько AJAX запросов одновременно одним обработчиком, но разными кнопками?

Вкратце: имеются несколько блоков, в каждой - кнопка отправки AJAX запроса к серверу, и каждый блок, каждый запрос передает свои параметры, но суть одна и таже. Поэтому JS отправки один для всех кнопок (блоков), адрес сервера один и тот же, и кнопки имеют один класс в html. Нажимается кнопка, идет отправка, потом вмето нее результат на основе ответа сервера. Если не спешить, все хорошо работает. Если не дожидаться результата одной кнопки и нажать другую, то как будто первый ajax запрос обрывается, а второй начинает выполняться. Не очень большой опыт имеется, поэтому вопрос - что я делаю не так? :)

UPD.: Суть - кнопок .small_apply_button.multi_source несколько, просто каждая передает свой идентификатор, поэтому обработчик один. Нажимаю одну, быстренько нажимаю другую - первая перестает обрабатываться, зависает ajax запрос на этапе "Отправка...", начинает обрабатываться событие ajax по второй кнопке, ajax запрос успешно выполняется и показывает уже результат.
Проще говоря - этот код как буд-то не умеет работать одновременно с двумя элементами, только за второй возьмется - работа с первым тут же прервется...
добавил код, упроситил чуть, оставил только суть:
$('.small_apply_button.multi_source').click(function(e) {
                e.preventDefault();
                small_apply_button = $(this);
                item = $(this).data('item');
                if($('.intel_order_form').valid()){   // test for validity
                    data = $('.intel_order_form').serializeArray();
                    products = [item];                    
                    small_result = small_apply_button.parent().find('.small_result');
                    $.ajax({
                        url: '/backend/getm.php',
                        type: 'GET',
                        dataType: 'json',
                        data: {data: data, utms: result, products: products},
                        beforeSend: function() {
                            small_apply_button.hide(); // скрываем текущую кнопку при начале отправки
                            small_result.find('.waiting_result').show(); // показываем "Отправка..."
                            small_result.show();
                        },
                        complete: function() {     
                            small_result.find('.waiting_result').hide();   // скрываем "Отправка..."                    
                        },
                        success: function(data) { 
                            status = data[item];                                  
                            if (status == 'accept') {
                                small_result.find('.success_result').fadeIn(200);  // вместо кнопки - сообщение с успешным ответом от сервера
                            } 
                            // тут были еще if else
                            else {                                
                                small_result.find('.reject_result').fadeIn(200); // другой вариант ответа сервера
                            }
                        },
                        error: function(data) { // когда сервер ошибкой ответил
                            console.log(data);            
                            small_result.find('.reject_result').fadeIn(200);          
                        },
                    });
                    return false;
                } else {
                    return false;
                }                
            });
  • Вопрос задан
  • 5516 просмотров
Решения вопроса 1
webinar
@webinar
Учим yii: https://youtu.be/-WRMlGHLgRg
1-е что надо сделать - дать код и описать правильно все
потом надо осознать что ajax это асинхронный запрос, а значит выполняется одновременно.
Потом стоит подумать: "А не сделать ли на кнопки disabled пока не получен ответ от сервера"
Потом когда все заработает, пройдет время, придет опыт и знания, Вы поймете что так делать нельзя и перепишите все по человечески.

Надо правильно объявлять переменные. вместо
small_apply_button = $(this);
сделайте
var small_apply_button = $(this);
и в других местах так же
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
AlexXYZ
@AlexXYZ
O Keep Clear O
У браузеров есть ограничения на одновременное выполнение ajax-запросов.
Так что не спроста у вас всё хорошо работает, если вы "не спишите" нажимать кнопки. Может быть вам надо отменять запрос, если пользователь нажал другую кнопку? Тогда дело пойдёт быстрее. Смотрите ajax cancel request
Так что всё вы делаете так. Только теперь учтите ограничения одновременных запросов.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы