Почему посылается большое количество запросов от AJAX?

Question

[Владислав Колоцей]

Столкнулся со следующей проблемой. Имеется страничка с меню и областью с динамическим контентом. При нажатии на пункт меню в области подгружается через ajax другая страничка.

После первого нажатия на ссылку в меню отправляется один запрос на сервер через ajax, после второго нажатия на пункт меню посылается уже два запроса на сервер и т.д. То есть после каждого нажатия на пункт меню кол-во запросов удваивается. И после 10 кликов на пункт меню сервер начинает очень сильно тупить.

Не понимаю почему так происходит, подскажите, в чем может быть проблема? Ниже представлены фото

Код ссылки, по которой происходит отправка запроса на сервер:

<p><a class="links view">Просмотр справочника</a></p>

Код ajax для отправки запроса на сервер:

$(".view").click(function() {
		console.log("ajax view");
		$.ajax({  
			type: "POST",
	        url: "actionController",
	        data: {command: 'view', start: '0'},
	        success: function(html){ 
	        	$("#workplace").html(html);
	        }
	    });
	});

Лог консоля:


Обновлено:
Код ajax: https://jsfiddle.net/Vlady_32/uo7o375s/

Код java (сервлет, обработчик команды): https://jsfiddle.net/Vlady_32/jhm9gzf1/
Пришлось вставлять java код в html, js, css. Извиняюсь.

Comments

[OVK2015]

А какая у вас структура меню? Может событие щелчка в нем пузырьком всплывает?

[Владислав Колоцей]

OVK2015: https://jsfiddle.net/Vlady_32/uo7o375s/

[OVK2015]

Владислав Колоцей:
А что js код делает в css блоке?

[Владислав Колоцей]

OVK2015: не заметил. Поправил

[OVK2015]

Владислав Колоцей:
В том виде, что на jsFiddle все работает штатно.
Осталось узнать: что вам возвращается с этих url "redirectController", url: "actionController"

[Владислав Колоцей]

OVK2015: RedirectController не нужен, там ничего стоящего не происходит и там точно ошибки нет. actionConntroller залил на jsFiddle, в новости обновлены ссылки

Answer 1

[Алексей]

Возможно вы несколько раз исполняете приведенный код, тем самым добавляете одинаковые обработчики.
Надо смотреть более полный код, а так же то что вы загружаете через ajax - может там тоже javascript есть.
Ну или у вас грузится еще один div class="view" в существующий div class="view" и click срабатывает на каждом.

Comments

[Владислав Колоцей]

https://jsfiddle.net/Vlady_32/uo7o375s/

[Алексей]

Пока что у вас все нормально, вопрос в том что грузится по ссылке "actionController".

[Владислав Колоцей]

Алексей: Сервлет отдает страницу view.jsp.

[Владислав Колоцей]

Алексей: Сервлет делает forward на страницу view.jsp.

[Алексей]

Хотелось бы на пациента взглянуть, так можно гадать очень долго.
Или на jsfiddle/codepen, где вы воспроизведете ошибку.
Пока что в представленном кода ошибок нет.
Ошибка где-то глубже, возможно в содержимом view.jsp.

[Владислав Колоцей]

Алексей: Java классы, jsp залил на jsfiddle. В новости обновлены ссылки.

[Алексей]

Вы во view.jps отдаете целую страницу, с html, head, body и даже скриптами.
Они вероятно каждый раз загружаются и исполняются заново, возможно заново срабатывает и $(document).ready. Вам нужно во view.jps выдавать не страницу целиком, а только нужный кусок кода.

[Владислав Колоцей]

Алексей: Спасибо. Действительно работает. Такой ещё вопрос, как необходимо отдавать страницу через ajax? C тегами html body, или только необходимые элементы, например div?

[Алексей]

В вашем случае только то, что необходимо поместить в элемент $("#workplace"), то есть div + content будет достаточно. Возможно даже без div - это зависит уже от верстки.

Answer 2

[Андрей]

Попробуй preventDefault() и stopPropagation()

Я бы не стал использовать ссылки, переназначая на них обработчики событий. Не смотря на то, что это весьма распространенная практика, лично у меня она вызывает диссонанс. Это все равно что купить гусеничный трактор, отрезать ему гусеницы, приделать колёса и так на нем рассекать, радуясь своей изобретательности... :)

В приведенном коде явного криминала не увидел, хотя сам подход мне кажется сомнительным... Объясню свою позицию с точки зрения рацио и здравого смысла - HTML сгенеренный на сервере дорог. Нынче модно с сервера получать JSON, и шаблонизацию прогонять client-side. Это на порядок экономичнее, стало быть та же самая шелесяка в датацентре выдержит на порядок больше нагрузку...

А если еще типовые повторяющиеся вещи кешировать...

Answer 3

[SecurityCodeNAS]

Попробуйте проверить так
$(".view").off().click(function() {
console.log("ajax view");
$.ajax({
type: "POST",
url: "actionController",
data: {command: 'view', start: '0'},
success: function(html){
$("#workplace").html(html);
}
});
});

Comments

[Владислав Колоцей]

При таком способе запросы увеличиваются с каждым кликом не в 2 раза, как было раньше, а просто увеличиваются с каждым разом на 1. Пример: 1, 2, 3, 4, 5, 6...