Как на ванильном js отправить содержимое текстового поля формы в формате json с помощью ajax и получить ответ от сервера ту же строку?

Question

[chips07]

Не могу найти ошибку... После клика по кнопе ничего не происходит...

<form id="form-name">
	<input type="text" name="name" id="text-field">
	<input type="text" name="response" id="response-field">
	<button type="submit" id="btn">Click me</button>
</form>

window.onload = function() {

	var form = document.getElementById('form-name');
	var textField = document.getElementById('text-field');

	form.onsubmit = function() {
		var request = new XMLHttpRequest();
		var text = textField.value;
		request.open('POST', 'script.php', true);

		request.onreadystatechange = function() {
			if (this.readyState === 4 && this.status === 200) {
				document.getElementById('response-field').value = this.responseText;
				// console.log(this.responseText);
			}
		};

		var date = {name: text};
		request.setRequestHeader('Content-type', 'application/json');
		request.send(JSON.stringify(date));
		return false;
	};

};

if (isset($_POST['name'])) {echo json_encode($_POST['name']);}

Answer 1

[RoverWhite]

Проблема Ваша вот в этой строке
if (isset($_POST['name'])) {echo json_encode($_POST['name']);}

Вы передаете на сервер не форму а контент в виде JSON который PHP не декодирует в $_POST
Более того должны получать warning по поводу того что "Populating raw post data is deprecated"
Для того чтобы Вам получить на сервере сырые данные надо забрать их, например вот так:
$data = file_get_contents('php://input');

А чтобы не получать ошибок надо в php.ini проставить
always_populate_raw_post_data = -1

А с Ванильным JS все хорошо.