【问题标题】:How to put HTML text-box form input into Express Route Paramater如何将 HTML 文本框表单输入放入 Express Route 参数
【发布时间】:2018-07-31 16:55:06
【问题描述】:

我正在尝试为用户创建一种通过这样的端点搜索我的 mongo 数据库的方法:

app.get('/search/:input', function(req, res){
  console.log(`get request to: /members/${req.params.input}`);
  var regexValue = '\.*'+req.params.input+'*\.';
  db.collection(myCollection).find({"full_name": {$regex: regexValue, $options: 'i'}}).toArray((err, members) => {
    if(err) return console.log(err)
    console.log(members);
    res.render('search/list', {members: members});
  })
});

我希望他们能够在文本框中输入并让它直​​接执行此端点。我有一个非常简单的文本框,如下所示:

<form action="/search/">
  <input type="text" name="firstname" ><br>
  <input type="submit" value="Submit">
</form>

我的问题是我不知道如何将提交的字符串从文本框中获取到请求参数中。

【问题讨论】:

  • 表单提交是帖子提交。为什么不用 app.post() 而不是 app.get()?
  • 为什么要传入参数可以使用查询。
  • 我不想使用 POST,因为我没有向数据库添加任何内容,我只是要求返回数据:AKA GET。谢谢拉胡尔,查询参数是我所缺少的:)

标签: javascript html node.js mongodb express


【解决方案1】:

您可以使用 ajax get 方法传递输入框值,使用 req.params.input 访问该值。以下是我尝试过的代码。

app.js

app.get('/:input', function(req, res) {
  console.log(req.params.input);
});

index.ejs

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
</head>
<body>
<input type="text" name="firstname" id="firstname" ><br>
<input type="button" value="search" id="search">
<script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
    $('#search').click(function(){
        var firstname = $('#firstname').val();
        $.ajax({
            url: "http://localhost:3000/users/"+firstname,
            method: 'get'
        }).done(function() {

        });
    })

</script>

</body>
</html>

【讨论】:

    【解决方案2】:

    使用 Express Route app.get('/search/:input', function(req, res){ 然后 :input 是路径参数输入,但您的 html 表单将发出 GET 请求 /search/?firstname=firstname_value,该请求不会匹配到 Route。

    如果您想使用 GET 方法,请使用 app.get('/search', function(req, res){ 而不是您当前的代码,然后使用 console.log(get 请求:/members/${req.query.firstname});

    (我不知道为什么日志显示/members/???而路由设置是/search/

    【讨论】:

    • 谢谢。从请求参数更改为查询是缺少的!
    猜你喜欢
    • 1970-01-01
    • 2011-09-21
    • 2017-09-28
    • 1970-01-01
    • 2012-01-05
    • 1970-01-01
    • 1970-01-01
    • 2023-04-01
    • 1970-01-01
    相关资源
    最近更新 更多