Не получается отправить форму для обработки на 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);
});
});