70 lines
2.5 KiB
HTML
70 lines
2.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Регистрация</title>
|
|
<meta charset="utf-8" />
|
|
</head>
|
|
<body>
|
|
<h1>Введите данные</h1>
|
|
<form name="registerForm">
|
|
<label>Имя</label><br />
|
|
<input
|
|
type="text"
|
|
name="userName"
|
|
/><br /><br />
|
|
<label>Возраст</label><br />
|
|
<input
|
|
type="number"
|
|
name="userAge"
|
|
/><br /><br />
|
|
<button type="submit" id="submit">
|
|
Отправить
|
|
</button>
|
|
</form>
|
|
<script>
|
|
document
|
|
.getElementById('submit')
|
|
.addEventListener('click', function (e) {
|
|
e.preventDefault();
|
|
// получаем данные формы
|
|
let registerForm =
|
|
document.forms['registerForm'];
|
|
let userName =
|
|
registerForm.elements['userName']
|
|
.value;
|
|
let userAge =
|
|
registerForm.elements['userAge']
|
|
.value;
|
|
// сериализуем данные в json
|
|
let user = JSON.stringify({
|
|
userName: userName,
|
|
userAge: userAge,
|
|
});
|
|
let request = new XMLHttpRequest();
|
|
// посылаем запрос на адрес "/user"
|
|
request.open('POST', '/user', true);
|
|
request.setRequestHeader(
|
|
'Content-Type',
|
|
'application/json'
|
|
);
|
|
request.addEventListener(
|
|
'load',
|
|
function () {
|
|
// получаем и парсим ответ сервера
|
|
let receivedUser = JSON.parse(
|
|
request.response
|
|
);
|
|
console.log(
|
|
receivedUser.userName,
|
|
'-',
|
|
receivedUser.userAge
|
|
); // смотрим ответ сервера
|
|
}
|
|
);
|
|
request.send(user);
|
|
});
|
|
</script>
|
|
</body>
|
|
<html></html>
|
|
</html>
|