Работа с DOM структурой в Node.js

292
16 мая 2017, 01:48

Ситуация:

У меня есть файл index.html в котором создана обычная html-страница с ‹input id="name"›. Так же у меня есть файл server.js в котором запускается сервер на express по адресу 127.0.0.1:3000.

Проблема:

Как мне работать с DOM структурой файла index.html из файла server.js. Например, мне нужно считать значение с ‹input id="input-field"›.

Answer 1

Поскольку index.html отображается на стороне клиента и значение в ‹input id="input-field"› присутствует на стороне клиента, то и работать с ним надо на стороне клиента - в браузере.

Вам надо создать и добавить на страницу JavaScript код, который будет обрабатывать эти данные и пересылать вам на сервер используя стандартный механизм из http протокола.

Добавить скрипт можно используя тэг script, а пересылать данные можно используя XMLHttpRequest

Answer 2

Как на счет Cheerio? Загружаешь свой HTML и работаешь как с Jquery на клиенте.

https://cheerio.js.org/

Answer 3

Чтобы передать значение поля ввода с клиента (index.html) на сервер (server.js) можно сделать submit формы.

Пример public/index.html:

<html> 
<body> 
    <form action="/form_test" method="get"> 
        <input type="text" id="input-field" name="input-field" title="Тест параметра формы"> 
        <input type="submit" value="Отправить"> 
    </form> 
</body> 
</html>

Пример server.js:

const express = require('express');
const app = express();
app.use('/', express.static(__dirname + '/public/'));
app.get('/form_test', (req, res) => {
  res.send(`input-field value is:  ${req.query['input-field']}`);
});
app.listen(3000, () => {
  console.log('Example app listening on port 3000!')
});
READ ALSO
Ускорить slick slider
HTML

Ускорить slick slider

Есть такая проблема: при загрузке страницы, блоки slick slider отображаются друг под другом и только после полной загрузки выстраиваются как положено

 510
Не работает form multiple на Android
HTML

Не работает form multiple на Android

Заметил интересный баг, на Android не работает множественный выбор в <input type="file" name="file[]" accept="image/*" multiple="true"> причем только с включенным атрибутом...

 314
Портфолио для FCC
HTML

Портфолио для FCC

Codepen: https://codepenio/Tvarinskyy/pen/PmaqQr

 296
Проблема с кликами в js
HTML

Проблема с кликами в js

Есть простой код:

 302