Как получить элемент в HTML используя Node.JS с JSDom или без

Question

И так, коротко говоря мне нужно получить данные из текстового поля HTML при помощи Node.JS. Тоесть от клиента к серверу или наоборот.

HTML:

<body>
    <pre>
        <text>Кодировщик</text>

        <textarea id="filename_1" required>main</textarea>

        <select id="select_1" required>
            <option>Выберите действие</option>
        </select>

        <button id="button_1">test</button>
    </pre>
</body>

JavaScript:

const express = require('express');
const path = require('path');
const engines = require('consolidate');
const { JSDOM } = require('jsdom')
const { readFileSync } = require('fs')

//--------------------------------------------------
//Server
//--------------------------------------------------
const app = express();

app.set('views', `${__dirname}/views`)
app.engine('html', engines.mustache)
app.set('view engine', 'html')

app.get('/', (req, res) => {
    const data = {}

    res.render('pages/main.html', data)
})

const arguments = {
    port: Number(process.argv[2])
}

app.listen(arguments.port, () => {
    console.log(`Server started on port: ${arguments.port}`)
    code()
})

//Хост включен
function code() {
    global.document = new JSDOM(readFileSync(path.join(__dirname, './views/pages/main.html'), { encoding: 'utf8' })).window.document
    document.getElementById('button_1').onclick = function() {
        console.log(`TEST!`)
        console.log(document.getElementById('filename_1').textContent)
    }
}

Вот и как это можно сделать, я просто не могу понять я уже устал, ничего не нашел. Нужно получить процесс, допустим получить введенный текст из textarea в запускаемом файле Node.JS, или нажатие на кнопку и так далее

Использовал JSDom но я смог получить из него только только созданный HTML с обычными значениями а не вводимым пользователем.

P.S. Уменьшил HTML что бы понять больше

Answer 1

Вам необходимо создать JS-файл рядом с вашим HTML-файлом, затем подключить его к HTML-файлу через тег script.

Этот JS-файл должен иметь следующий вид:

const button = document.querySelector('#button_1')
const textarea = document.querySelector('textarea')

button.addEventListener('click', async () => {
    await fetch(<url сервера>/getText, {
        method: 'POST',
        body: JSON.stringify({ text: textarea.value }),
        headers: {
            "Content-Type": "application/json",
        },
        mode: "no-cors"
    })
})

А также вам необходимо добавить обработчик POST/PUT-запросов и endpoint в ваш NodeJS-файл:

app.use(express.json()) // for POST and PUT requests

app.post('/getText', (req, res) => {
    console.log(req.body.text)
})

БЛОГ НА HUSL

Как получить элемент в HTML используя Node.JS с JSDom или без

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