jQuery ajax POST и GET асинхронные запросы на сервер

от 2018 - 12 - 22

При помощи jQuery можно легко и просто реализовать асинхронные запросы данных от сервера без перезагрузки страницы.

Далее показываю код, как это работает и подробно распишу для тебя, что именно происходит:
Предположим мы хотим отправить данные из формы (имя, телефон, email, …) на сервер для проверки и сохранения в базе

// Сначала сформируем данные для отправки
var objData = {
	name: "Иван",
	phone: '777-77-77',
	email: 'test@inf-o.ru'
    }
// Я ввёл данные самостоятельно хардкодом, вы можете использовать реальные значения 
// из инпутов форм $('input[name="name"]').val() , но сейчас не об этом.

// Теперь надо отправить данные на сервер, для проверки
	$.ajax({
// в этой строке мы указываем скрипт на сервере, к которому будет отправлен запрос
		url: '/my_ajax_script_folder/ajax.php',
// Определяет тип (метод) выполняемого запроса (GET или POST). Можно использовать также типы PUT и DELETE, но нужно помнить, что их поддерживают не все браузеры.
		type: 'POST', 
// Указываем переменную - объект, содержащий параметры для отправки.
		data: objData, 
// Функция, которая будет выполнена каждый раз перед отправкой
		beforeSend: function() {
			$('.overlay-loading').show(); // Сам-то я показываю людям красивый оверлей с вращающейся картинкой загрузки в этот момент. А ты?
		},
// Функция success будет выполнена в случае успешного ответа от сервера, текст ответа придёт в переменную result
		success: function(result) {
			$('.overlay-loading').hide(); // Прячем окошко ожидания загрузки ответа сервера
                        // Записываем текст ответа сервера в специальный контейнер, заранее мною созданный в HTML шаблоне. <div class="container-for-ajax-results"></div>
			$('.container-for-ajax-results').html( result ); 
		},
// Функция error запустится в случае ошибки запроса, причём получит 3 аргумента на вход: 
// XMLHttpRequest (jqXHR) - объект запроса (отсюда можно узнать код ошибки)
// textStatus - Текст ошибки
// errorThrown - объект исключения, если такой имеет место быть
		error: function(jqXHR, textStatus, errorThrown) {
			$('.overlay-loading').hide();
			console.log('Произошла ошибка ('+textStatus+')! Попробуйте позже. = ', jqXHR);
		}
	});