Не получается отправить форму для обработки на JavaScript

Делаю свой сайт на node.js. Весь бэкенд на JavaScript. Хочу сделать регистрацию пользователя. Для этого у меня есть страница /registration

<form id="reg">
    <h1>Регистрация</h1>
    <div class="registration-wrapper">
        <div class="registration-row">
            <label for="email">E-mail</label>
            <input type="email" id="email" name="email" placeholder="Введите свой e-mail" required >
        </div>
        <div class="registration-row">
            <label for="name">Имя и фамилия</label>
            <input type="text" id="name" name="name" placeholder="Введите свое имя и фамилию" required >
        </div>
        <div class="registration-row">
            <label for="pass">Пароль</label>
            <input type="password" id="pass" name="pass" placeholder="Введите пароль" required >
        </div>
        <div class="registration-row">
            <label for="double-pass">Подтвердите пароль</label>
            <input type="password" id="double-pass" name="double-pass" placeholder="Введите пароль еще раз" required >
        </div>
        <button id="formButton">Зарегистрироваться</button>
        <img src="/images/registration-form.png" alt="" draggable="false">
    </div>
</form>

Весь сервер у меня в файле app.js

const express = require('express');
const session = require('express-session');
const FileStore = require('session-file-store')(session);
const passport = require('passport');
const bodyParser = require('body-parser');

const app = express();

app.use(express.json());
app.use(express.urlencoded({extended: false}));

const urlencodedParser = bodyParser.urlencoded({extended: false,});


//подключаем сессию
app.use(
    session({
        secret: 'fdFNK234F&^ef==wefdfh',
        store: new FileStore(),
        cookie: {
            path: '/',
            httpOnly: true,
            maxAge: Infinity
        },
        resave: false,
        saveUninitialized: false
    })
)

app.set('view engine', 'ejs');
app.use(express.static('public'));

app.get('/', (req, res) => {
    res.render('index');
});
app.get('/support', (req, res) => {
    res.render('support');
});
app.get('/contacts', (req, res) => {
    res.render('contacts');
});
app.get('/profile', (req, res) => {
    res.render('profile');
});
app.get('/registration', (req, res) => {
    res.render('auntefication/registration');
});

app.post('/registration', (req, res) => {
    console.log("aboba");
    if (!req.body) return res.sendStatus(400);
    console.log(req.body);
    res.render('auntefication/registration');
});

app.get('/auth', (req, res) => {
    res.render('auntefication/auth');
});

const PORT = 3000;

app.listen(PORT, () => {
    console.log(`Server started: http://localhost:${PORT}`)
})

А форму я хочу обработать в файле reg.js

const formButton = document.getElementById('formButton');
const form = document.getElementById('reg');
formButton.addEventListener('click', function(event) {
    event.preventDefault;
    const formData = new FormData(form);
    console.log(formData);
    fetch('/registration', {
        method: 'POST',
        body: JSON.stringify(formData),
        headers: { 'Content-Type': 'application/json' }
    }).then(response => response.text()).then(data => {
        console.log(data); // Выводим ответ от сервера в консоль
    }).catch(error => {
        console.error('Error:', error);
    });
});

Но данный код у меня не работает и в консоли сервера вообще ничего не отображается. Только обновляется страница и все. Как исправить проблему?


Ответы (1 шт):

Автор решения: XlAlbertlX

Исправил проблему, добавив const searchParams = new URLSearchParams(formData);

const formButton = document.getElementById('formButton');
const form = document.getElementById('reg');

formButton.addEventListener('click', function(event) {
    event.preventDefault();
    const formData = new FormData(form);
    const searchParams = new URLSearchParams(formData);
    fetch('/registration', {
        method: 'POST',
        body: searchParams
    }).then(response => response.text()).then(data => {
        console.log(data); // Выводим ответ от сервера в консоль
    }).catch(error => {
        console.error('Error:', error);
    });
});
→ Ссылка