Estoy tratando de implementar una función en la que tengo una entrada en esta ruta para realizar una búsqueda en vivo de empleados en la base de datos.
app.get('/delete' , isLoggedIn , (req , res) => { res.render('pages/delete') })Esta ruta sirve como entrada de búsqueda. ¿Cómo creo una búsqueda en vivo basada en un detector de eventos keyup que envía los datos a mongoDb/mongoose para buscar y devolver los resultados en la página?
Sé cómo hacer que el detector de eventos obtenga lo que se escribe, así que está en el archivo delete.js
const deleteSearchInput = document.querySelector('#search-input'); deleteSearchInput.addEventListener('keyup' , (e) => { let search = e.target.value.trim() })¿Cómo envío el valor "e" a una ruta de publicación para hacer la búsqueda y devolverla a la página?
AJAX (utilizando la API de fetch de JavaScript). AJAX permite que JavaScript envíe solicitudes al servidor sin recargar.
const deleteSearchInput = document.querySelector('#search-input'); deleteSearchInput.addEventListener('keyup' , (e) => { let search = e.target.value.trim(); fetch('/delete', { method: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' }, body: JSON.stringify({search}) }).then(res => res.json() ).then(data => { console.log(data.result); // <-- success! }).catch(err => { alert('error!'); console.error(err); }); });Entonces tienes cambios que hacer en el lado del servidor. Dado que está enviando una solicitud POST, debe crear un controlador para POST:
app.post('/delete', isLoggedIn, (req, res) => { res.send('success!'); });Esto manejará las solicitudes de publicación y solo las solicitudes de publicación. Ahora, para obtener el valor de lo que envió al servidor, necesitamos usar un paquete npm llamado body-parser, que analiza la solicitud entrante. Ejecute el siguiente comando en shell:
npm i body-parserLuego, en la parte superior de su archivo de servidor antes de declarar que sus rutas importan y usan la biblioteca del analizador de cuerpo:
const bodyParser = require('body-parser'); app.use(bodyParser.json()); // <-- add the JSON parserFinalmente cambie su controlador nuevamente:
app.post('/delete', isLoggedIn, (req, res) => { const { search } = req.body; console.log(search); // ... do whatever you want and send a response, eg: const result = 'my awesome message'; res.json({ result }); });Y así es como lo haces.