Создание асинхронной кнопки

Не мне рассказывать вам про преимущества использования асинхронного метода в таких случаях.

Дело в том, что AJAX очень удобен, когда следует совершить какое-либо действие на сайте — оставить комментарий, поставить «Like» к статье, либо даже подгрузить более старые комменты.

Но делать сайт полностью 100% на AJAX… по-моему не стоит даже и думать об этом и я не имею ввиду индексируемость у поисковиков, где-то в документации google даже есть отличная статья как сделать свой AJAX-сайт нормально индексируемым. Всё дело в удобстве.

Итак, с этого поста начинается цикл статей про AJAX, только скорее всего это будет AJAX через jQuery, а не через XMLHttpRequest или что-нибудь ещё.

Короче это было что-то вроде вступления))

Начну пожалуй с примера кнопки:

HTML-код:

<form class="follow-form" method="POST" action="follow.php">
	<input type="hidden" name="user_ID" value="31" />
	<button type="submit" value="Actions" class="async_button follow">
		<i></i><span>подписаться</span>
	</button>
</form>

Как видите, это самая обычная POST-форма, уверен, что вы знаете, как работать с такими формами через PHP.

При помощи скрытых полей и будут передаваться все необходимые параметры.

Теперь CSS, это кстати те же самые стили, которые я использовал в примере выше, конечно же вы можете оформить кнопку и по-своему.

button.async_button {
	background-attachment:scroll;
	cursor:pointer;
	background:#ddd url(https://misha.agency/demo/async-ajax-jquery-button/background.gif) 0 0 repeat-x;
	color:#333;
	padding:4px 8px 5px 8px;
	border:1px solid #ddd;
	font-family:"Lucida Grande",sans-serif;
	font-size:11px;
	line-height:14px;
	text-shadow:1px 1px 0 #fff;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	vertical-align:top;
	border-bottom:1px solid #ccc;
}
 
button.async_button span {
	color:#333;
}
 
button.async_button:hover {
	color:#000;
	border:1px solid #999;
	background-position:0 -6px;
	background-color:#d5d5d5;
	border-bottom-color:#888;
}
 
button.async_button:active {
	text-shadow:none !important;
	background-image:none !important;
}
 
button.async_button i {
	display:inline-block;
	margin:0 5px -1px 0;
	height:13px;
	width:15px;
	background:url(https://misha.agency/demo/async-ajax-jquery-button/icons.png) -176px -32px no-repeat;
}
 
button.async_button i.active {
	background:url(https://misha.agency/demo/async-ajax-jquery-button/loading.gif);
}
 
/* эти свойства присваиваются элементу после выполнения php-скрипта */
span.ok {
	color:#777;
	font-size:12px;
	padding:5px 10px;
}
 
span.ok span {
	display:inline-block;
	margin-right:5px;
	height:9px;
	width:10px;
	background:url(https://misha.agency/demo/async-ajax-jquery-button/icons.png) no-repeat -160px -16px;
}

и jQuery: (только не забудьте перед этим подключить саму библиотеку)

jQuery(function ($) {
/* получаем элементы и отключаем событие формы по умолчанию */
$("form.follow-form").submit(function (e) {
	/* останавливаем событие */
	e.preventDefault();
	/* "при нажатии кнопки" */
	$(this).find('i').addClass('active');
	/* посылаем ajax запрос */
	$.post('follow.php', {
		followID: $(this).find('input').val()
	}, function () {
	/* находим и скрываем кнопку, создаем новый элемент */
	$(e.currentTarget)
	.find('button').hide()
	.after('<span class="ok"><span></span>готово!</span>');
	});
});
});

Обратите внимание на файл follow.php, он должен находиться в той же папке, что и js-файл, в противном случае следует указать абсолютный путь.

Ну вот и всё готово, на самом деле ничего сложного, больше всего кода — это CSS-стили)) Я надеюсь, что вы знаете, что куда вставлять.

Миша

Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.

Пишите, если нужна помощь с сайтом или разработка с нуля.