Как обработать событие 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 вывел на страницу данные, в соответствии с поисковым запросом.

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

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, почему такое может происходить?
Написано более двух лет назад

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

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

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

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

Linux

+2 ещё

Простой
Почему не удается подключиться к серверу с самоподписанным доверенным сертификатом?
- 2 подписчика
- 8 часов назад
- 88 просмотров
0

ответов
JavaScript

+1 ещё

Средний
Как подключить поисковую систему в js?
- 1 подписчик
- 8 часов назад
- 61 просмотр
1

ответ
JavaScript

+1 ещё

Простой
Почему JS не видит SVG-элементы по ID?
- 1 подписчик
- 12 часов назад
- 57 просмотров
1

ответ
JavaScript

Средний
Почему не срабатывает горячая клавиша в расширение?
- 1 подписчик
- 13 часов назад
- 37 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Почему react-hook-form не отображает ошибки zod в определенных моментах?
- 1 подписчик
- 15 часов назад
- 29 просмотров
0

ответов
JavaScript

Простой
Почему перестало работать меню?
- 1 подписчик
- 20 нояб.
- 140 просмотров
1

ответ
JavaScript

Простой
Какая логика у перебора массива таким способом?
- 1 подписчик
- 20 нояб.
- 166 просмотров
5

ответов
Node.js

+1 ещё

Средний
Как получить список всех участников телеграм группы?
- 1 подписчик
- 20 нояб.
- 120 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Как перевести перевести top в translateY?
- 1 подписчик
- 20 нояб.
- 85 просмотров
1

ответ
JavaScript

Простой
E.target видит лишь малую область блока?
- 1 подписчик
- 20 нояб.
- 52 просмотра
0

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

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Fullstack разработчик JavaScript, php

Дорстрой-36 • Воронеж

от 100 000 до 200 000 ₽

JavaScript FullStack developer

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

До 220 000 ₽

Смонтировать видео

23 нояб. 2024, в 01:31

1000 руб./за проект

Настроить сайт

23 нояб. 2024, в 00:16

2000 руб./за проект

Разобрать текущий ETL-процесс

22 нояб. 2024, в 23:55

3000 руб./за проект

Это нельзя выполнить на стороне сервера. Можно выполнить на стороне клиента и передать что-то в 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?

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

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

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