javascript - 如何使用Node JS、Postgres和dust js在数据库中搜索数据

Question

我正在使用 Node JS、dustjs 和 PostgreSQL 制作一个网页。如何在 html 中进行搜索查询，以便将值传递给 app.get我需要使用 JQuery 吗？

app.get('/teachers', function(req, res){
  pool.connect(function(err, client, done){
    if(err) {
      return console.error("error", err);
    }
    client.query('SELECT * FROM teachers', function(err, result){
      if(err){
        return console.error('error running query', err)
      }
      res.render('teacherindex', {teachers: result.rows});
      done();
    });
  });
});



app.get('/teachers/:str', (req,res)=>{
  pool.connect((err, client, done) => {
    if (err) throw err
    client.query('SELECT * FROM teachers WHERE name = $1', [req.query.namesearch], (err, result) => {
      done()
      if (err) {
        console.log(err.stack)
      } else {
        res.render('teacherindex', {teachers: result.rows});
      }
    })
  })
})

这是我的 JQuery

$("#myBtn").click(function(){
    var str = $("#myInput").val();
    var url = '/teachers/'+str;
    if(confirm('Search Record?')){
        $.ajax({
            url: url,
            type: 'put',
            success: function(result){
                console.log('Searching');
                window.location.href='/teachers';
            },
            error: function(err){
                console.log(err);
            }
        });
    }
});

我的 HTML

<input type="text" id="myInput" data-id="namesearch">
<button type="button" id="myBtn">Show Value</button>

谢谢!

Answer 1

最终答案:

好吧，事实证明您遇到的问题完全不同。您正在尝试为此使用服务器端渲染，我向您展示了如何在客户端渲染检索到的数据。

我已经 fork 并更新了您的存储库 - 可以在下面的链接中找到..

请查看我的更改，如果有任何问题请告诉我。

工作仓库:https://github.com/oze4/hanstanawi.github.io

演示视频:https://raw.githubusercontent.com/oze4/hanstanawi.github.io/master/fake_uni_demo.mp4

<小时/><小时/><小时/>

编辑:

I went ahead and built a repository to try and help you grasp these concepts. You can find the repo here - 我试图让事情尽可能简单易懂，但如果您有任何疑问，请告诉我。

• 我必须对路径进行一些细微的更改，我已在存储库中的代码中注释了这些更改。

• 我使用的是“模拟”数据库(只是不同文件中的 JSON 对象)，但逻辑保持不变。

• index.js是主要入口点，包含所有路线数据。

• index.html file 是发送给用户的内容，是主要的 HTML 文件，其中包含 jQuery 代码。

如果您下载/ fork /测试该存储库中的代码，请打开浏览器开发人员工具，转到网络选项卡，然后检查差异。

使用req.params

使用req.query

<小时/><小时/><小时/>

原始答案:

因此，您的代码存在一些问题，以及为什么您无法看到文本框服务器端的值。

• 您正在发送 PUT 请求，但您的服务器正在等待 GET 请求
• 当您应该在 req.params 中查找值时，您却在 req.query 中查找值
• 您正在路由中查找不正确的变量名称(除了应该使用参数时使用查询之外)req.query.namesearch 需要是 req.params.str
• See here有关 req.query 与 req.params 的更多信息

More detailed examples below.

• 在您的路由中指定 app.get - 换句话说，您期望将 GET 请求发送到您的服务器。 .但您正在发送 PUT 请求..
• 如果您使用 /teachers?str=someName 等方式将 AJAX 发送到服务器，那么您将使用 req.query.str - 或者，如果您想使用 namesearch，您可以执行以下操作:/teachers?namesearch=someName，然后获取值:req.query.namesearch
• 如果您使用 /teachers/someName 之类的内容将 AJAX 发送到服务器，那么您应该使用 req.params.str

//  ||
//  \/ Server is expecting a GET request
app.get('/teachers/:str', (req, res) => {
  // GET THE CORRECT VALUE
  let namesearch = req.params.str;

  pool.connect((err, client, done) => {
    // ... other code here

    client.query(
      'SELECT * FROM teachers WHERE name = $1',

      // SPECIFY THE CORRECT VALUE
      namesearch,

      (err, result) => {
        // ... other code here
      })
  })
});

• 但是在您的 AJAX 请求中，您指定 PUT..(应该是 GET)>
• 默认情况下，AJAX 将发送 GET 请求，因此您实际上不必在此处指定任何 type，但我个人喜欢在 type 中指定 GET，只是为了简洁起见 - 在我看来更简洁。
• 同样，在 type 中指定 GET 是不需要的，因为 AJAX 发送默认情况下，GET 在 type 中指定 GET 是一个偏好问题。

$("#myBtn").click(function () {
  // ... other code here
  let textboxValue = $("#myTextbox").val();
  let theURL = "/teachers/" + textboxValue;

  // OR if you wanted to use `req.query.str` server side
  // let theURL = "/teachers?str=" + textboxValue;

  if (confirm('Search Record?')) {
    $.ajax({
      url: theURL,
      //     ||
      //     \/ You are sending a PUT request, not a GET request
      type: 'put', // EITHER CHANGE THIS TO GET OR JUST REMOVE type
      // ... other code here
    });
  }
});

看来您正在从文本框中正确获取值，您只需要确保您的服务器接受与您发送的类型相同的类型。