Express js как отправить данные на сервер без перезагрузки страницы
Есть такой кода на сервере
const express = require('express');
const path = require('path');
const fs = require('fs');
const bodyParser = require('body-parser')
const app = express();
app.use(express.json())
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static('src'));
app.get(`/`, (req, res) => res.sendFile(path.resolve(__dirname, 'src', 'views', 'public', 'index.html')))
app.post(`/book`, (req, res) => {
if (!req.body) {
return
} else {
if (!req.body.title || !req.body.author) {
res.json(JSON.stringify({ message: 'Вы пытайтесь отправить пустые данные' }))
return
}
console.log(req.body);
res.sendFile(path.resolve(__dirname, 'src', 'views', 'public', 'index.html'))
res.json(JSON.stringify({ message: 'Данные записаны' }))
}
})
app.get(`/book`, (req, res) => {
res.sendFile(path.resolve(__dirname, 'src', 'views', 'public', 'index.html'))
})
app.listen(80, () => console.log(`Server started in port 80`))
Код на клиенте
const httpAjax = (method, url, response_type, body = null) => {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open(method, url, true);
xhr.responseType = response_type;
xhr.setRequestHeader("Content-type", "application/json; charset=utf-8");
xhr.onload = () => xhr.status >= 400 ? reject(xhr.response) : resolve(xhr.response);
xhr.onerrror = () => reject(xhr.response);
xhr.send(JSON.stringify(body));
});
};
httpAjax('get', `/book`, 'json').then(elem => {
console.log("? ~ httpAjax ~ elem:", elem)
});
HTML
<form action="/book" method="post">
<input type="text" name="title" />
<input type="text" name="author" />
<button type="submit">Send</button>
</form>
при отправке данных из формы у меня происходит переход на странице как на картинках 1 и 2
В итоге я хочу чтобы у меня грузилась главная страница
http://localhost
или чтобы грузилась страница
http://localhost/book
И получать сообщение о успешной загрузке или пустых данных в консоли браузера и при это видеть результат как на третьей картинке, но с результатами в консоли браузера
Что я делаю не так? У меня получается кусками работать на сервере. В том смысле, что отдельные куски работают, а вот собрать все знания в кучу не получается
P.S. Пока жду ответа, анализирую свой вопрос, в голову пришла идея, при отправки данных формы, можно отключить событие по умолчанию submit и отправить и получить данные посредством ajax.
Верна ли моя мысль?


