如何使用 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

最终答案：

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

我已经分叉并更新了你的 repo - 可以在下面的链接中找到..

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

工作回购：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 - 我尽量让事情简单易懂，但如果您有任何问题，请告诉我。

• 我不得不对路径进行一些小改动，我已在 repo 中对代码进行了注释说明。

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

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

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

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

使用req.params

使用req.query

---

---

---

原始答案：

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

• 您正在发送 PUT 请求，但您的服务器正在等待 GET 请求
• 您正在寻找 req.query 中的值，而您应该在 req.params 中寻找它
• 您正在寻找路径中不正确的变量名称（在您应该使用参数时使用查询）req.query.namesearch 需要为 req.params.str
• See here 更多关于 req.query 与 req.params

下面有更详细的例子。

• 在您的路由中，您指定了 app.get - 换句话说，您希望将 GET 请求发送到您的服务器.. 但您发送的是 @ 987654348@请求..
• 如果您使用/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
    });
  }
});

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