jQuery Ajax – события успеха и ошибки

При помощи jQuery можно значительно упростить AJAX. В данной статье рассмотрим один из вариантов.

События ajax при успешном выполнении и ошибки

Использовать будем $.ajax(), перед тем как писать скрипт, не забываем подключать jQuery.
Основа нашего скрипта будет выглядеть так:

$('.price-table').on('click', '.btn-item-add', function(){
	$.ajax({});

	return false;
});

В данном коде мы видим, что по клику на кнопку с классом .btn-item-add, у которой кстати должен быть родитель с классом .price-table, мы вызываем аякс (пока что безе параметров для более простого понимания). return false – дописываем на случай если наша кнопка сделана через тег <a>.

Теперь добавим события и базовые параметры:

//AJAX ADD TO CART
$('.price-table').on('click', '.btn-item-add', function(){

	var $id = $(this).data('id'),
		$thisBut = $(this),
		$count = $(this).prev('.quant-block').find('.pr-item-quant').val();

	$.ajax({
		url: '/include/ajax_cart.php',
		type: 'get',
		cache: false,
		data: 'id='+$id+'&count='+$count,
	}).done(function(data){
		//смотрим какой ответ отправляется в случае успеха
		console.log(data);
	}).complete(function(){
		// после того как аякс выполнился
	}).error(function(){
		// пишем ошибку в консоль если что-то пошло не так
		console.log('There was an error');
	});

	return false;
});

В самом начале добавились параметры, а для аякса прописали параметры: url, type, cache и data. Обратите внимание что мы передаем параметры, а в PHP $_GET в дальнейшем можно их обработать. Ссылку указываем относительно корня сайта.

Для примера у нас есть 3 jQuery события – done, complete и error. Отличие done от complete лишь в том что done вызывается первым. Таким образом мы можем в первой функции выполнить запрос, а во второй делать что душе угодно 🙂 .

Как вызвать 2 аякса подряд при помощи jQuery

Рассмотрим код посложнее. По клику у нас появляется прелоадер по середине экрана.

//AJAX ADD TO CART
$('.price-table').on('click', '.btn-item-add', function(){

	$('body').append('<div class="ajax-preload"></div>');

	var $id = $(this).data('id'),
		$thisBut = $(this),
		$count = $(this).prev('.quant-block').find('.pr-item-quant').val();

	$.ajax({
		url: '/include/ajax_cart.php',
		type: 'get',
		cache: false,
		data: 'id='+$id+'&count='+$count,
	}).done(function(data){

		$('#bid4').html(data);

	}).complete(function(){

		$.ajax({
			url: '/include/ajax_cart_big.php',
			type: 'get',
			cache: false,
			data: false,
		}).done(function(data){
			$('#bid2').html(data);
		});

		$('.ajax-preload').remove();
		$('body').append('<div class="tooltip">Товар добавлен в корзину</div>');
		$('.tooltip').animate({ top: '20px' }, 1500).fadeOut(1500);

	}).error(function(){
		console.log('There was an error');
	});

	return false;
});

Затем наши знакомые параметры ($id, $thisBut, $count). В функции .complete записываем вызов еще одного ajax запроса. Также убираем наш прелоадер. Таким образом можно выиграть немного времени при загрузке данных.

Весь код разбирать не будем, т.к. статья  и так получилась больше чем  предполагалось, но я надеюсь что вы всё поняли 🙂 .

UPDATE 23.10.2018

Как передать файл через ajax:

$('#js-send-form').on('submit', function(){
		if (!$(this).hasClass('normal')) {

			var $dataForm = new FormData();
			$dataForm.append('comment', $('#comment').val());
			$dataForm.append('type', $('#types option:selected').val());

			jQuery.each(jQuery('#file')[0].files, function(i, file) {
				$dataForm.append('file-'+i, file);
			});

			$.ajax({
				url: "/local/components/ready/main.documents/templates/.default/ajax_soap.php",
				data: $dataForm,
				cache: false,
				contentType: false,
				processData: false,
				method: 'POST',
				type: 'POST', // For jQuery < 1.9
				success: function(data){
					console.log(data);
				}
			});

			return false;
		}
	});