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

1 2

3

В итоге я хочу чтобы у меня грузилась главная страница

http://localhost

или чтобы грузилась страница

http://localhost/book

И получать сообщение о успешной загрузке или пустых данных в консоли браузера и при это видеть результат как на третьей картинке, но с результатами в консоли браузера

Что я делаю не так? У меня получается кусками работать на сервере. В том смысле, что отдельные куски работают, а вот собрать все знания в кучу не получается

P.S. Пока жду ответа, анализирую свой вопрос, в голову пришла идея, при отправки данных формы, можно отключить событие по умолчанию submit и отправить и получить данные посредством ajax.

Верна ли моя мысль?


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