POST-запрос c обработкой на сервере

@Programmist228 · Регистрация: 01.05.2020

Студворк — интернет-сервис помощи студентам

Подскажите пожалуйста как реализовать POST-запрос и его обработать на сервере, 2ой день мучаюсь.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../styles.css">
    <title>Регистрация</title>
</head>
<body>
    <p class="form_auth_block_head_text">Регистрация</p>
    <form id="form" action="http://localhost:8080/reg" method="POST">
        <br>
        <div class="user">
            <label for="sign-fio">Введите ваше ФИО:</label>
            <input type="text" name="fio" id="sign-fio" pattern="^[а-яА-Я\s]+$" placeholder="Введите ФИО" required>
        </div>
        <br>
        <div class="user">
            <label for="contactChoice1">Ваш пол:</label>
 
            <input type="radio" id="contactChoice1" name="contact" value="man" required>
            <label for="contactChoice1">М</label>
            <input type="radio" id="contactChoice2" name="contact" value="female">
            <label for="contactChoice2">Ж</label>
        </div>
        <br>
        <div class="user">
            <label for="sign-age">Возраст:</label>
            <input type="number" name="age" id="sign-age" min="14" max="100" required>
        </div>
 
        <br>
        <div class="user">
            <label for="sign-phone">Телефон:</label>
            <input type="text" name="phone" id="sign-phone" pattern="^[0-9]+$" placeholder="Введите телефон" required>
        </div>
        <br>
        <div class="user">
            <label for="sign-email">Введите логин:</label>
            <input type="text" name="email" id="sign-email" pattern="[a-z0-9._]+@[a-z]+\.[a-z]{2,}$"  placeholder="Введите почту" minlength="10" maxlength="60" required>
        </div>
        <br>
        <div class="user">
            <label for="sign-pass">Введите пароль:</label>
            <input type="password" name="password" id="sign-pass" placeholder="Введите пароль" required>
        </div>
        <br>
        <div class="user">
            <input type="submit" value="Войти">
        </div>
    </form>
    <script src="../scripts/registration.js"></script>
</body>
</html>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
const form = document.getElementById('form');
 
function getFormValue(event){
    event.preventDefault();
 
    const fio = form.querySelector('[name="fio"]'), //получаем поле name
        /*        sex = form.querySelector('[name="sex"]'),*/
        age = form.querySelector('[name="age"]'), //получаем поле age
        phone = form.querySelector('[name="phone"]'), //получаем поле plan
        login = form.querySelector('[name="email"]'), //получаем поле plan
        password = form.querySelector('[name="password"]'); //получаем поле plan
 
    const data = JSON.stringify({
        fio: fio.value,
        /*        sex: sex.checked.value,*/
        age: age.value,
        phone: phone.value,
        login: login.value,
        password: password.value
    });
 
    const data2 = {
        "fio": fio.value,
        "login":login.value
    }
    console.log(data);
    var xhr = new XMLHttpRequest();
    xhr.open("POST",'http://localhost:8080/reg',true)
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded','charset=UTF-8');
    xhr.send(fio)
}
 
 
form.addEventListener('submit',getFormValue);

Java
1
2
3
4
5
6
7
8
9
     @GetMapping("/reg")
    public void registration(HttpServletRequest request, HttpServletResponse response) throws IOException, ClassNotFoundException, SQLException, InterruptedException {
        response.setContentType("application/json");
        response.setCharacterEncoding("UTF-8");
        response.addHeader("Access-Control-Allow-Origin", "*");
        response.addHeader("Access-Control-Allow-Methods", "POST");
        System.out.println(request.getParameter("email"));
 
}

krvsa · 27.07.2022, 15:37

Сообщение от Programmist228

реализовать POST-запрос

Почитай в учебнике, там и пример есть.

https://learn.javascript.ru/xh... urlencoded

Сообщение от Programmist228

и его обработать на сервере

Тут уже смотря на чем сервер писан...

Добавлено через 8 минут
Programmist228, для отправки формы можно еще использовать fetch...
https://learn.javascript.ru/formdata

@DrType · 27.07.2022, 18:17

Как обработать запрос на сервере — спрашивайте в разделе Java...

@j2FunOnly · 28.07.2022, 09:26

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const form = document.getElementById('form');
form.addEventListener('submit', getFormValue);
 
function getFormValue (event) {
  event.preventDefault();
 
  const data = new FormData(this);
  for (const [name, value] of data.entries()) console.log(name, value);
 
  const xhr = new XMLHttpRequest();
  xhr.open("POST", this.action, true);
  xhr.onload = function () {
    console.log(this.response);
  };
  xhr.send(data);
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const form = document.getElementById('form');
form.addEventListener('submit', getFormValue);
 
function getFormValue (event) {
  event.preventDefault();
 
  const data = new FormData(this);
  for (const [name, value] of data.entries()) console.log(name, value);
 
  fetch('/reg', {
    method: 'POST',
    body: data
  })
  .then(res => res.json())
  .then(json => console.log(json));
}

Сообщение от Programmist228

и его обработать на сервере

Новые блоги и статьи Все статьи Все блоги /
делаю науч статью по влиянию грибов на сукцессию anaschu 13.03.2026 прикрепляю статью	SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .
Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .	Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .	SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .

@DrType 6553 / 3624 / 1075 Регистрация: 07.09.2019 Сообщений: 5,877 Записей в блоге: 1
	27.07.2022, 18:17
	Как обработать запрос на сервере — спрашивайте в разделе Java... 0