Question

我已经创建了一个node.js应用程序并成功连接到Postgres数据库。我还创建了一个.html文件，其格式包含一个输入文本字段和一个提交按钮。

当我在文本字段中输入内容并按提交按钮时，我希望我的node.js应用使用表单中输入的输入文本字段搜索该记录并将其显示在浏览器中。

我尝试使用请求参数并成功获取了记录，但这不需要使用HTML。我希望它可以在按钮的帮助下动态获取。

我也尝试过使用“提交”按钮上的onclick（）调用动态URI（例如“ / abc /：xyz”），但没有得到任何结果。

node.js [处理“获取”请求的端点]

sleep 10 && [run_your_app]

index.html [包含简单的html格式]

app.get('/details/:regn_no', (req, res, next) => {

      const regn_no = req.params.regn_no;

      const results = [];

      pg.connect(connectionString, (err, client, done) => {

        if(err) {
          done();
          console.log(err);
          return res.status(500).json({success: false, data: err});
        }

        const query = client.query('select * from vt_owner where regn_no= 
             $1',[regn_no]);

        query.on('row', (row) => {
          results.push(row);
        });
        query.on('end', () => {
          done();
          return res.json(results);

        });
      });
    });

当我键入“ regn_no”并单击提交时。该应用程序应获取与特定“ regn_no”匹配的记录并显示它们。

Answer 1

您在正确的轨道上。完全丢失表格，这里不需要。一个简单的文本输入和带有onclick处理程序的按钮。使用jQuery调用端点，并使用收到的结果更新div。类似于以下内容：

<html>
<body>
  <input type="text" id="jqueryInput">
  <button id="jqueryButton">Search</button>

  <div id="jqueryOutput"></div>

  <script>

    $("jqueryButton").click(function() {
      $.post("demo_test.asp", { regn_no: $("jqueryButton").val() }, function(res, status) {
        $( "#jqueryOutput" ).html( res );
      });
    });

  </script>
</body>
</html>

调整URL以及传递参数的方式以适合您的API。祝你好运。

Answer 2

您需要纠正的几件事。

1）将您的按钮转换为“提交”按钮

<input type="submit" value="Submit" />

2）如下更改您的Jquery代码。

$(document).ready(function(){
    $("#form").submit(function (event) {
        event.preventDefault();
        $.ajax({
            url: '/details/'+$('#UserInput').val(),
            method: 'get',
            success : function(data) {
                   // 1) manipulate your result (data) if required
                   // 2) display result inside specfic div eg.   
                  $('#div_id').html(data);
                   console.log(data)
            }
       });
   });
});

使用postgres，nodejs和html动态搜索查询

node.js [处理“获取”请求的端点]

index.html [包含简单的html格式]

2 个答案: