Как отправить запрос в БД, не обновляя страницу?

Question

[Матвей Мамонов]

Здравствуйте, сегодня я решил перейти на новый для себя уровень и улучшить качество своего сайта.

Мне стало очень интересно, как делаются такие вещи как проверка доступности никнейма, вход в аккаунт без перезагрузки страницы и подобные штучки.

Порывшись в езернете обнаружил, что с этим связана так называемая технология AJAX. Хотелось бы узнать, как она работает, что это вообще есть, что из себя представляет, как подключается, с чем ее едят и что можно почитать по этому вопросу.

Теперь ближе к делу. Я думаю, что не нужно объяснять подробно, что именно я хочу, тут и так все понятно. Нужно авторизировать пользователя, не перезагружая при этом страницу. У меня есть необходимый php код, но, понятное дело, с таким подходом придется страницу перезагружать.

Кто что может посоветовать по этому поводу? Желательно, конечно, исчерпывающий пример привести того, как это можно сделать, с кодом, понятно. Буду очень признателен.

Answer 1

[Олег Прилепа]

Допустим, существует на сайте форма, работает без ajax:
<form action="" id="test_form">...</form>
Чтобы она стала работать через ajax, надо на js повесить обработчик события submit, и прерывать в нем событие (методом return false;), вместо чего отправлять запрос средствами js.
Для простоты и кроссбраузерности можно подключить jquery.
Тогда появится такой код:

$(function(){ // DOM ready
	$('#test_form').submit(function(){
		$.post(
			$(this).attr('action'), // url
			$(this).serializeArray(), // data
			function(answ) //callback
			{
				//...
			},
			'html' // answer type (html, text, json, ...)
		);
		return false;
	});
});

Дальше уже дело фантазии. Я часто делаю полноценную noajax версию, потом на backend добавляю if (!$_REQUEST['ajax']) { ... } обертки вокруг блоков, которые при ajax отдавать не надо (для экономии передаваемого трафика).

Чтобы пользователь не спамил запросами на сервер можно ставить индикатор запроса и т.п.

Comments

[Матвей Мамонов]

Скажите, а то, что вы прокомментировали как callback, это ответ сервера в нее записывается, или как? И параметр answ за что отвечает? Он обязательно именно так именован должен быть?

[Олег Прилепа]

Матвей Мамонов: callback это функция, которая будет вызвана в случае успешного исполнения запроса. answ - это название переменной, в которую будет помещен ответ. формат этого ответа зависит от answer type (для html||text это будет string, для json это будет object). На самом деле $.post ($.get) это обертки над более универсальным методом $.ajax, в нем больше параметров, но зато появляется возможность сделать callback на случай, когда произошла ошибка (404, timeout, etc). Полная документация по методу есть здесь: api.jquery.com/jquery.ajax

[Олег Прилепа]

Параметр answ можно назвать как угодно.

[Матвей Мамонов]

Олег Прилепа: Более или менее разобрался, спасибо за развернутый ответ.

[Матвей Мамонов]

Олег Прилепа: Скажите, а почему мне просто возвращается в функцию колбэка содержимое моей страницы? Может быть, это связано с тем, что у меня в моем php коде написано, что если не нажата кнопка регистрации, то он подключает форму? (Писалось для обычной регистрации, а не для безперезагрузочной).

Вот PHP

if (isset($_POST['register'])) {
				
				if (self::CheckEnteredData() === true) {
				
					self::ActionsWithDB();
					self::ActionsWithCookies();
					Main::Redirect("/");
					
				} else {
					$output = self::CheckEnteredData();
					include_once("templates/signup.php");
				}
				
			} else {
				include_once("templates/signup.php");
			}

Вот JS

if (isset($_POST['register'])) {
				
				if (self::CheckEnteredData() === true) {
				
					self::ActionsWithDB();
					self::ActionsWithCookies();
					Main::Redirect("/");
					
				} else {
					$output = self::CheckEnteredData();
					include_once("templates/signup.php");
				}
				
			} else {
				include_once("templates/signup.php");
			}

Ну и HTML на всякий

<form action="/account/signup/index.php" method="POST" id="reg">
			<input type="text" name="login" placeholder="login"><span>V</span><br>
			<input type="email" name="email" placeholder="email"><span>V</span><br>
			<input type="password" name="password" placeholder="password"><span>V</span><br>
			<input type="password" name="repassword" placeholder="password again"><span>V</span><br>
			<input type="submit" name="register">
		</form>

[Матвей Мамонов]

Матвей Мамонов: все равно поведение очень странное, даже если от нажатия кнопки зависит. У меня в формах ведь кнопки все равно одинаково называются, что в подключаемом файле, что в этом - все register. Так что, по логике вещей, скрипт все равно должен обнаруживать, что кнопка нажата.

Или, может быть, нужно делать еще и какую-то особую, отдельную проверку на предмет отправки формы через AJAX?

[Матвей Мамонов]

Олег Прилепа: или я неправильно понял? Может быть в колбэк кидается ошибка, возникшая при попытке выполнения? Но все равно, проверял в БД, новая запись не появляется -> скрипт не работает/работает неправильно.

[Матвей Мамонов]

Кажется, я нашел решение проблемы. Действительно, нужно было просто убрать проверку на факт нажатия кнопки 'register'. Но все-таки интересно, существует ли какая-нибудь проверка на факт того, была ли отправлена форма посредством AJAX?

[Олег Прилепа]

Насколько я понял, $.serializeArray() не собирает в запрос input:submit. Не знаю, баг это, или так и задумано.

[Матвей Мамонов]

Олег Прилепа: интересно еще кое-что.
Мне осталось непонятным, как получить в callback ответ. Пытался записать результат вызова функции в переменную, а потом эту переменную вернуть (return), но это не помогает.

[Олег Прилепа]

Матвей Мамонов: для отладки можно использовать console.log(answ); и смотреть консоль.

Answer 2

[Александр Таратин]

https://code-live.ru/post/php-ajax-registration/