javascript - 如何将数据从 ejs(日期选择器)传递到 js(查询数据库),然后将结果显示回 ejs(在标签中)?

标签 javascript node.js mongodb express

我是 Nodejs/Mongo DB 的初学者。我正在设计一个简单的页面,单击按钮即可显示所选日期的通过/失败状态。

我弄清楚了如何查询 mongo DB 集合以获取特定日期的通过和失败值(此“日期”必须来自 html 日期选择器)。

所以我想知道如何使其动态,以便它适用于日期选择器中选择的任何日期。

有人可以帮忙吗?我一直在努力寻找解决方案。

**userlist.ejs**

<!DOCTYPE html>
<html>
  <head>
    <title>Status</title>

    <link rel='stylesheet' href='/stylesheets/style.css' />
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#datepicker" ).datepicker();
  } );
  </script>
  </head>
  <body>
    <h1>Status</h1>
    <p>Welcome to Status</p>
    Date: <input type="text" id="datepicker">
    <input type="button" id="txbox" value="Find">
    <p>Pass is <%=userlist[0].Passed%></p>
    <p>Fail is <%=userlist[0].Failed%></p>
  </body>
</html>
index.js

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

/* GET Hello World page. */
router.get('/userlist', function(req, res) {
    var db = req.db;
    var collection = db.get('usercollection');
    collection.find({
      $and: [
          {"Date": "29-03-2019"}
        ]
    },function(e,docs){
        res.render('userlist', {
            "userlist" : docs
        });
    });
});

module.exports = router;
DB collection:
Collection name : usercollection
collection name - usercollection

{
Passed:"60"
Failed:"40"
Date: "30-03-2019"
}

{
Passed:"20"
Failed:"80"
Date: "29-03-2019"
正如你所看到的,我在 mongo db 查询部分中对日期进行了编码 - 我想将其替换为一个可以保存日期选择器 html(userlist.ejs) 中传递的值的变量。那么我该怎么做呢?

如果这听起来很菜鸟,我很抱歉!!!

最佳答案

如果您要从客户端传递一些数据,则需要 POST http 谓词。为此,您需要从客户端 POST 并在服务器端监听帖子。以下更改应该会有所帮助:

使用html form来发布方法(或者您可以使用AJAX来发布)

<form action="/userlist" method="POST">
  <input type="text" id="datepicker">
  <button type="submit" id="txbox" value="submit"><Find<button>
</form>

在您的路由器中,您需要监听 POST 请求,例如:

router.post('/userlist', function(req, res) {
  // where did you get this?
  var db = req.db;

  // from html form, probably need some parsing
  var date = req.body.datepicker

  var collection = db.get('usercollection');
  collection.find({
    $and: [
      {"Date": date}
    ]
  },function(e,docs){
    res.render('userlist', {
      "userlist" : docs
    });
  });
});

还需要安装body-parser来解析传入的表单正文

const bodyparser = require('body-parser');

// app or server, whatever is your express, mount this before any routes
app.use(bodyParser.urlencoded({ extended: false }))

关于javascript - 如何将数据从 ejs(日期选择器)传递到 js(查询数据库),然后将结果显示回 ejs(在标签中)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55425169/

相关文章:

mysql - 为现有 MySQL 数据库定义 Sequelize 模型

mongodb - docker-compose 与 MongoDb 和卷 - 似乎没有安装

c# - 无法从我的 C# 控制台应用程序中使用 MongoDB

Mongodb设置唯一字段

javascript - 如何分割输入标签HTML的字符串?

javascript - 无法请求使用 JQuery 将 GET API 部署到本地 Tomcat 服务器?

Javascript toLocaleString 未使用正确的格式

node.js - 使用 fork 进行错误处理

python - 有没有办法创建 Alexa 智能家居组并根据发现的设备以编程方式预先填充它?

javascript - JS Ray Tracer 对象无限长