Отправка формы на сервер в JavaScript
Работа с HTML-формами - это одна из сильных сторон в JavaScript. В примере далее я покажу Вам как просто можно отправить данные формы на сервер. PHP-скрипт на сервере будет получать запрос, преобразовывать его и возвращать обратно. Итак, код далее.
Файл index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Отправка формы на сервер в JavaScript</title>
</head>
<body>
<form id="form">
<input type="text" name="uname" value="John">
<input type="text" name="surname" value="Doe">
<input type="submit">
</form>
<script>
// асинхронная функция
async function SendForm(e)
{
// останавливает действие по умолчанию
e.preventDefault();
// отправляем POST запрос на сервер
let response = await fetch('form.php', {
method: 'POST', // метод POST
body: new FormData(form) // в класс FormData передаем ссылку на форму
});
// получаем JSON
let result = await response.json();
console.log(result);
};
// при щелчке на кнопку отправки формы
// отправляем форму на сервер
form.onsubmit = SendForm;
</script>
</body>
</html>
Файл form.php
<?php
// преобразуем массив в объект
$req = (object) $_REQUEST;
// отправляем заголовок типа JSON
header('Content-Type: application/json');
// преобразуем данные и отправляем обратно
print json_encode([
'name' => strtoupper($req->uname),
'surname' => strtoupper($req->surname)
]);
Вот так можно отправить данные формы на сервер, используя возможности ES6 JavaScript.
-
Создано 08.09.2020 08:50:29
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.