【问题标题】:How do I make a live search result in node.js and mongoDb如何在 node.js 和 mongoDb 中生成实时搜索结果
【发布时间】:2022-01-12 07:27:26
【问题描述】:

我正在尝试实现一个功能,我在这条路线上有一个输入,以便实时搜索数据库中的员工

app.get('/delete' , isLoggedIn , (req , res) => {
    res.render('pages/delete')
})

这条路线服务于搜索输入。如何基于 keyup 事件侦听器创建实时搜索,将数据发送到 mongoDb/mongoose 以在页面上搜索并返回结果?

我知道如何通过事件侦听器来获取 delete.js 文件中输入的内容

const deleteSearchInput = document.querySelector('#search-input');

deleteSearchInput.addEventListener('keyup' , (e) => {
    let search = e.target.value.trim()
})

如何将值“e”发送到发布路径以进行搜索并将其返回到页面

【问题讨论】:

  • 发布路由还是获取路由?
  • 我希望它是一个发布路线,因为它会做一些查询。获取路线只是带来或呈现表单@code

标签: javascript node.js api


【解决方案1】:

AJAX(使用 JavaScript fetch API)。 AJAX 允许 JavaScript 向服务器发送请求而无需重新加载。

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);
    });
});

然后您需要对服务器端进行更改。由于您正在发送 POST 请求,因此您需要创建一个处理程序来 POST:

app.post('/delete', isLoggedIn, (req, res) => {
    res.send('success!');
});

这将处理发布请求,并且只处理发布请求。现在要获取您发送到服务器的任何内容的值,我们需要使用一个名为 body-parser 的 npm 包来解析传入的请求。在 shell 中运行以下命令:

npm i body-parser

然后在你的服务器文件的顶部声明你的路由导入并使用 body-parser 库:

const bodyParser = require('body-parser');
app.use(bodyParser.json()); // <-- add the JSON parser

最后再次更改您的处理程序:

app.post('/delete', isLoggedIn, (req, res) => {
    const { search } = req.body;
    console.log(search);
    // ... do whatever you want and send a response, e.g.:
    const result = 'my awesome message';
    res.json({ result });
});

你就是这样做的。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2014-02-11
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-01-22
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多