Как сделать индикацию ожидания ответа сервера при post/get запросах, чтобы не запускать функцию индикации при каждом запросе?

Question

[MrGret]

Подскажите пожалуйста, как сделать функцию, которая следит за событиями отправки / приема данных с сервера и на время ожидания запускает анимацию?

Answer 1

[EGO]

Если грубо и просто, то берёте jQuey и для формы вешаете событие отмены отправки и делаете обмен с сервером через ajax.
У $.ajax в beforeSend вы делаете действие для начала показа анимации, а при complete вы эту анимацию убираете. В моём примере показывается изначально скрытый блок #ajax-loader внутри которого просто вставлена gif-анимация. Форму и блок делаете на свой вкус :)

$(document).on("submit", "#YouFormId", function(e){
			e.preventDefault();
			$.ajax({
				type: $(this).attr('method'),
				url:  $(this).attr('action'),
				data: $(this).serialize(),  // отправляемые данные на сервер взятые из полей формы
				beforeSend: function(){
					$("#ajax-loader").fadeIn(300); // показываем блок с анимацией
				},
				complete: function(){
					$("#ajax-loader").fadeOut(300); // скрываем блок с анимацией
				},
				error: function(result){
					alert("Неизвестная ошибка при отправке. Попробуйте повторить позже.");
				},
				success: function(data) {
					alert( "Пришли данный от сервера : " + data );
				}
			});
		});

Или почитайте тут.