jquery ajax Отправка запроса методом POST/GET -- подробный пример. Обработчик ошибки и ответа

Код, позволяющий отправить ajax-запрос средствами jQuery.ajax():


$.ajax({
	type: "POST", // метод
	url: '/hello/',  // адрес отправки (url)
	dataType: 'json',  // тип возвращаемого значения
	data: formData,  // отравляемые данные (обычно js-объект)
	// обработчик успешного ответа
	success: function (data, textStatus, jqXHR) {
		console.log('Получили ответ:', data);
	},
	// обработчик ошибки
	error: function(xhr, status, error){
		console.log('ajaxError xhr:', xhr); // выводим значения переменных
		console.log('ajaxError status:', status);
		console.log('ajaxError error:', error);
		// соберем самое интересное в переменную
		var errorInfo = 'Ошибка выполнения запроса: '
				+ '\n[' + xhr.status + ' ' + status   + ']'
				+  ' ' + error + ' \n '
				+ xhr.responseText
				+ '<br>'
				+ xhr.responseJSON;

		console.log('ajaxError:', errorInfo); // в консоль
		// alert(errorInfo); // если требуется и то на экран
	}
});

Отмечу:

  • Выше приведён асинхронный запрос, т.е. код написанный ниже продолжит выполняться, а обработчик ответа выполнится параллельно с основным потоком выполнения, когда этот ответ придёт.
    Асинхронные запросы позволяют не блокировать остальные элементы интерфейса на странице в ожидании ответа и считаются наиболее удобными для пользователя (его скорости работы с сайтом).
  • Здесь мы использовали подробный обработчик ошибочной ситуации.
  • Синтаксис приведённые выше, на мой взгляд более удобен чем альтернативный ("через точку").
  • Получить все поля формы в виде объекта (если вы не хотите сами формировать, а хотите отправить именно содержимое формы):
    var formData = $('селектор').serialize();