Как обработать событие onkeyup и обработать в Node JS?

Question

Jake Taylor @n199a

Java

Как обработать событие onkeyup и обработать в Node JS?

Пишу серверную часть на Node.JS, использую плагин expressи движок представлений handlebars.

Имеется обработка запроса по корневому адресу:

exports.index = function (request, response) {
    let searchValue = request.body.input;

    response.render('index.hbs', {
        title: 'Gifts main page',
        text: 'This is the left box',
        gifts: searchGiftCertificates(searchValue)
    });
}

В файле index.hbs с помощью выражения {{{body}}} подключается шаблон header.hbs, который:
1. содержит поле input (поисковая строка) с событием onkeyup:

<input id="search" onkeyup="searchGiftCertificates()" placeholder="Search by item name">

2. Содержит выражение {{gifts}}, которое является распарсенным JSON файлом и выводится с помощью выражения {{#each gifts}}

В процессе выполнения у меня возник вопрос, как правильно обработать событие onkeyup на стороне Node.JS или как это сделать? Нужно взять значение поля input по событию onkeyup и как-то передать на Node JS, чтобы в функции выше exports.index = function (request, response) { обработать и передать данные (JSON) в выражение gifts: searchGiftCertificates(searchValue), чтобы handlebars вывел на страницу данные, в соответствии с поисковым запросом.

Вопрос задан более трёх лет назад
95 просмотров

7 комментариев

Подписаться 1 Простой 7 комментариев

WapSter @wapster92 Куратор тега JavaScript

Это нельзя выполнить на стороне сервера. Можно выполнить на стороне клиента и передать что-то в node. handlebars срабатывает только один раз, когда клиент запрашивает страницу, дальше с ней он никак не взаимодействует

Написано более трёх лет назад
Jake Taylor @n199a Автор вопроса
WapSter, Ага, спасибо за совет. Что сейчас имеем:
1. handlebars отрабатывает
2. Обработка события onleyup с помощью JS на стороне клиента
3. Передача данных со стороны клиента на серверную сторону Node.JS

У меня есть шаблон общий для всех страниц default.hbs (приведу краткое содержание):

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>{{title}}</title> <link href="../../css/style.css" rel="stylesheet" type="text/css"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> </head> <body> <div id="workspace"> {{> header}} {{{body}}} {{> footer}} </div> </body> </html>

У меня возникло 2 вопроса:
1. Мне в данный дефолтный шаблон необходимо вставить тег <script>, где я подключу файл *.js, в котором будет выполняться обработка события onkeyup либо правильней будет вставить в файл header.hbs, содержимое которого будет вставлено на место выражения {{> header}}?
2. С помощью чего передаются данные, обработанные с помощью JS на стороне клиента, в NodeJS?
Написано более трёх лет назад
WapSter @wapster92 Куратор тега JavaScript

Jake Taylor, я мало знаком с подобным взаимодействием между сервером и клиентом, в практике использую только REST Api по этому не могу подсказать

Написано более трёх лет назад
GlazOtca @GlazOtca

Jake Taylor,
1 Если нужная функциональность нужна на каждой странице, то первый вариант, если только на некоторых - то 2-й вариант (в нужный header и подключите скрипт).
2 Вам нужен метод fetch

Написано более трёх лет назад
Jake Taylor @n199a Автор вопроса
GlazOtca, Спасибо. Я прочитал и сначала пробую выполнить с помощью XMLHttpRequest.

Набросал такой кусок:

<script> let inputSearch = document.getElementById('search'); inputSearch.onkeyup = function () { let searchValue = inputSearch.value; updateGiftCertificateList(searchValue); }; function updateGiftCertificateList(searchValue) { let url = '/'; let httpRequestType = 'GET'; let searchRequest = new XMLHttpRequest(); searchRequest.open(httpRequestType, url, true); searchRequest.setRequestHeader('Content-Type', 'text'); searchRequest.responseType = 'text'; // Request completed. Here we can process the result. searchRequest.onload = function () { console.log('search value: ' + searchValue); } searchRequest.send(searchValue); } </script>

Есть вопрос:
1. Правильно ли я передаю значение, которое вводит пользователь в строку поиска input. Поисковой запрос (значение, строка) присваивается переменной let searchValue и в функции updateGiftCertificateList() данное значение отправляется на сервер с помощью метода searchRequest.send(searchValue);
2. Если правильно, то на сервере Node.JS как получить значение переменной searchValue?

exports.index = function (request, response) { let giftCertificates; let searchValueFromPage = request.body; ... }

P.S. Читаю сейчас про fetch.
Написано более трёх лет назад
ThunderCat @ThunderCat Куратор тега JavaScript

Jake Taylor,
P.S. Читаю сейчас про fetch.
фетч - проапгрейженный иксмлхттпреквест, так что я бы сразу к нему перешел.

или поменять
На фронте:
searchRequest.send({ searchValue: searchValue });
На бэке:
let searchValueFromPage = request.body.searchValue;

Написано более трёх лет назад
Jake Taylor @n199a Автор вопроса
ThunderCat, Сделал также уже.

Почему мы используем request.body.searchValue; приGET запросе, если у GET запроса нету тела?

На фронте: searchRequest.send({ searchValue: searchValue }); На бэке: let searchValueFromPage = request.body.searchValue;

На сервере:

const bodyParser = require('body-parser'); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: false }));

На стороне сервера проверяю значение переменной searchValue, оно не пустое, а имеет значение, всё ок. Когда на сервере пытаюсь проверить, что пришло в переменной searchValue, то получаю undefined, почему такое может происходить?
Написано более трёх лет назад

Помогут разобраться в теме Все курсы

Нетология

Fullstack-разработчик на Python + нейросети

20 месяцев

Далее
Skillfactory

Профессия Веб-разработчик

12 месяцев

Далее
Яндекс Практикум

Фронтенд-разработчик

10 месяцев

Далее

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

JavaScript

+2 ещё

Простой
Как получить события VK.VideoPlayer используя JS?
- 1 подписчик
- 11 нояб.
- 96 просмотров
1

ответ
Node.js

+1 ещё

Простой
Какие есть пакеты для генерации уникальных, числовых идентификаторов длиной 10 цифр?
- 1 подписчик
- 10 нояб.
- 240 просмотров
2

ответа
JavaScript

+1 ещё

Сложный
Почему зависает виджет в OBS?
- 1 подписчик
- 10 нояб.
- 144 просмотра
0

ответов
JavaScript

Простой
Смещение группы в fabric.js?
- 1 подписчик
- 06 нояб.
- 127 просмотров
0

ответов
JavaScript

+2 ещё

Простой
Как сделать горизонтальный скролл стрелками?
- 1 подписчик
- 05 нояб.
- 198 просмотров
0

ответов
JavaScript

Простой
Как создать рисунок из PHP в Fabric.js?
- 2 подписчика
- 28 окт.
- 167 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Какой скрипт загружает меню в Ютуб?
- 2 подписчика
- 27 окт.
- 286 просмотров
2

ответа
Node.js

+1 ещё

Простой
Перевод бэкенда с PHP на NodeJs?
- 1 подписчик
- 26 окт.
- 419 просмотров
3

ответа
JavaScript

Простой
Как работать с разрозненными данными?
- 1 подписчик
- 21 окт.
- 251 просмотр
2

ответа
JavaScript

+1 ещё

Простой
Неправильно работает crypto.subtle.deriveKey в Firefox, баг или мой косяк?
- 2 подписчика
- 16 окт.
- 153 просмотра
0

ответов
Показать ещё Загружается…

Fullstack Разработчик (Next.js / JavaScript / TypeScript)

App Company

от 200 000 до 300 000 ₽

Web-разработчик/WordPress программист (Full-stack)

JustBusiness • Санкт-Петербург

от 130 000 до 150 000 ₽

React разработчик

ITK academy • Нижний Новгород

от 50 000 до 90 000 ₽

Это нельзя выполнить на стороне сервера. Можно выполнить на стороне клиента и передать что-то в node. handlebars срабатывает только один раз, когда клиент запрашивает страницу, дальше с ней он никак не взаимодействует
WapSter, Ага, спасибо за совет. Что сейчас имеем:
1. handlebars отрабатывает
2. Обработка события onleyup с помощью JS на стороне клиента
3. Передача данных со стороны клиента на серверную сторону Node.JS

У меня есть шаблон общий для всех страниц default.hbs (приведу краткое содержание):

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>{{title}}</title> <link href="../../css/style.css" rel="stylesheet" type="text/css"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> </head> <body> <div id="workspace"> {{> header}} {{{body}}} {{> footer}} </div> </body> </html>

У меня возникло 2 вопроса:
1. Мне в данный дефолтный шаблон необходимо вставить тег <script>, где я подключу файл *.js, в котором будет выполняться обработка события onkeyup либо правильней будет вставить в файл header.hbs, содержимое которого будет вставлено на место выражения {{> header}}?
2. С помощью чего передаются данные, обработанные с помощью JS на стороне клиента, в NodeJS?
Jake Taylor, я мало знаком с подобным взаимодействием между сервером и клиентом, в практике использую только REST Api по этому не могу подсказать
Jake Taylor,
1 Если нужная функциональность нужна на каждой странице, то первый вариант, если только на некоторых - то 2-й вариант (в нужный header и подключите скрипт).
2 Вам нужен метод fetch
GlazOtca, Спасибо. Я прочитал и сначала пробую выполнить с помощью XMLHttpRequest.

Набросал такой кусок:

<script> let inputSearch = document.getElementById('search'); inputSearch.onkeyup = function () { let searchValue = inputSearch.value; updateGiftCertificateList(searchValue); }; function updateGiftCertificateList(searchValue) { let url = '/'; let httpRequestType = 'GET'; let searchRequest = new XMLHttpRequest(); searchRequest.open(httpRequestType, url, true); searchRequest.setRequestHeader('Content-Type', 'text'); searchRequest.responseType = 'text'; // Request completed. Here we can process the result. searchRequest.onload = function () { console.log('search value: ' + searchValue); } searchRequest.send(searchValue); } </script>

Есть вопрос:
1. Правильно ли я передаю значение, которое вводит пользователь в строку поиска input. Поисковой запрос (значение, строка) присваивается переменной let searchValue и в функции updateGiftCertificateList() данное значение отправляется на сервер с помощью метода searchRequest.send(searchValue);
2. Если правильно, то на сервере Node.JS как получить значение переменной searchValue?

exports.index = function (request, response) { let giftCertificates; let searchValueFromPage = request.body; ... }

P.S. Читаю сейчас про fetch.
Jake Taylor,
P.S. Читаю сейчас про fetch.
фетч - проапгрейженный иксмлхттпреквест, так что я бы сразу к нему перешел.

или поменять
На фронте:
searchRequest.send({ searchValue: searchValue });
На бэке:
let searchValueFromPage = request.body.searchValue;
ThunderCat, Сделал также уже.

Почему мы используем request.body.searchValue; приGET запросе, если у GET запроса нету тела?

На фронте: searchRequest.send({ searchValue: searchValue }); На бэке: let searchValueFromPage = request.body.searchValue;

На сервере:

const bodyParser = require('body-parser'); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: false }));

На стороне сервера проверяю значение переменной searchValue, оно не пустое, а имеет значение, всё ок. Когда на сервере пытаюсь проверить, что пришло в переменной searchValue, то получаю undefined, почему такое может происходить?

Как обработать событие onkeyup и обработать в Node JS?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт