Как правильно отправлять асинхронные запросы из формы?

Question

[Muranx]

Здравствуйте!

Начинаю пробовать делать форму авторизации пользователя, встал насущный вопрос, как мне асинхронно сделать запрос на сервер (кстати я использую локальный openServer).. Пока что я застрял на ответе со стороны сервера, не понимаю как получить данные на сервере, которые я отправил методом POST, возможно касяк в самой форме, т.к. синхронный вариант я могу принимать на серваке спокойно, т.к. поля name="user_name" спокойно отлавливаются в массиве $_POST["user_name"] на сервере...

<div class="login_form_wrp">
	<div class="greetings">Введите ваши данные в форму :</div>
	<form action="" class="login_form" >
		<input class="login_input" type="text" name="user_name">
		<input autocomplete class="password_input" type="password" name="user_password">
		<div class="submit_login_btn" onclick="sendRequest();">Войти</div>
	</form>
</div>

сама функция , которая отправляет аякс запрос sendRequest()

function sendRequest(){

	let xhr = new XMLHttpRequest();
		login = document.querySelector('.login_input').value,
		pass = document.querySelector('.password_input').value;

	xhr.open('POST', 'php/login.php');
	xhr.send(JSON.stringify({log : login, pass: password});
	xhr.onload = function(){
		console.log(xhr.response);
	};
};

ну и собстно php...
echo json_encode($_POST);
результатом в консоль выводится []
1. если я меняю

<div class="submit_login_btn" onclick="sendRequest();">Войти</div>

на

<button class="submit_login_btn" onclick="sendRequest();">Войти</button>

происходит перезагрузка страницы (выяснено экспериментальным путём), это так и должно быть?
2. я предполагаю что при ajax запросах мне вообще ненужна как таковая конструкция формы? Т.е. я всё равно не использую атрибут action="", получается можно просто делать два инпута, и свой кастомный сабмит баттн?
3. почему массив $_POST на стороне сервера пуст, как мне отловить тот json который я пытаюсь асинхронно отправить, ведь он не именнованный в отличии от синхронных запросов и отправок типо $_POST["user_name"]?

Answer 1

[nokimaro]

При таком способе отправки данные в PHP надо получать не из $_POST а из php://input

<?php
$json = file_get_contents('php://input');
$data = json_decode($json, true);

//ваши данные в $data['log'], $data['pass']
print_r($data);

Comments

[Muranx]

nokimaro, хм, работает, жаль конечно что вы не ответили на др. вопросы, т.к. реально досих пор не понимаю, зачем тогда мне использовать синхронные формы

[FanatPHP]

1 так и должно быть
2 не нужна

Закупаем попкорн и садимся смотреть новый сезон сериала "помогите альтернативно одаренным вайти"

Answer 2

[Emil Revencu]

button изолированный в form работает по разному если у него атрибут type="submit" (по умолчанию) или type="button"
форма перегрузится в первом случае даже если не указан action
Используя второй метод используется только функция при клике

Comments

[Muranx]

Emil Revencu, спасибо за исчерпывающее объяснение !