【问题标题】:How do i access ejs data in a form while using express如何在使用 express 时以表单形式访问 ejs 数据
【发布时间】:2016-07-12 10:34:55
【问题描述】:

在以下代码中,我根据用户请求显示以下 HTML 文件。我还想在 app.js 文件中的 app.post() 函数中访问俱乐部名称并键入数据值。

<!DOCTYPE html>
<html>
<head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<% include templates/adminheader.ejs %>
<h1>Respond to Club Requests</h1>

<form name="clubform" method="post">
    <% for (var i in clubreq){%>
        Club Name:<%= clubreq[i].clubname %><br><br>//I want to access this variable in my app.post() function
        Club Type:<%= clubreq[i].type %><br><br>
        <input type="submit" value="accept"/><br><br><hr>
    <%} %>
</form>

</body>
</html>

app.js 内。在这里,我根据用户请求呈现 HTML 文件

app.get('/clubreq', function(req, res, next){
        res.render('clubreq', {
            title: 'Club Requests',
            "clubreq" : docs
        });       
});
app.post('/clubreq', function(req, res, next){
    //I want to access clubname and type datavariables here and store it in my mongodb database
});

【问题讨论】:

  • 俱乐部名称和类型变量是在纯文本中呈现还是在文本输入中呈现。另外,app.post() 代码实际上不是客户端,是吗?
  • 是的,我希望将这两个变量呈现为纯文本
  • 如果您想在提交表单时访问值服务器端,您需要将它们放入输入元素中。您可以选择文本类型或隐藏类型,但除非这些值嵌入到有效的表单字段值中,否则 app.post() 将无法访问它们。

标签: javascript html node.js express ejs


【解决方案1】:

让我们从将信息输入表单开始。像这样编辑表格:

<form action="/clubreq" method="post">
    <% for (var i in clubreq){%>
        Club Name: <input type="text" name="clubname[]" value="<%= clubreq[i].clubname %>" /><br><br>
        Club Type: <input type="text" name="clubtype[]" value="<%= clubreq[i].type %>" /><br><br>
        <input type="submit" value="accept"/><br><br><hr>
    <%} %>
</form>

重要的一点是添加指示表单提交位置的操作属性以及添加输入以确保值和表单一起传输。如果您不喜欢它的外观,您可以将输入类型更改为隐藏,然后像之前一样添加另一个回显俱乐部名称和俱乐部类型供最终用户查看。

现在介绍如何访问表单数据服务器端,将以下内容与所有其他中间件一起添加到顶部:

app.use(express.bodyParser());

接下来,您可以像这样在您的方法中访问帖子数据:

app.post('/clubreq', function(req, res, next){
   // req.body object has your form values
   console.log(req.body.clubname);
   console.log(req.body.clubtype);
});

希望有帮助

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-08-01
    • 1970-01-01
    • 2013-06-05
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多