Question

在我的项目中，我希望用户选择一个单选按钮，然后根据该单选按钮的值显示一个唯一的页面。我必须使用ejs模板，但我不明白如何将按钮的值传递给ejs模板。

<input name="imagePick" value="1" type="radio" id="one">
<label for="one">
   <img src="images/aries.png" alt="aries" height="150" width="auto">
</label>

<input name="imagePick" value="2" type="radio" id="two">
<label for="two">
    <img src="images/taurus.png" alt="taurus" height="150" width="auto">
</label>


$("input[name='imagePick']").on("change", function() {
    var sign = $('input[name="imagePick"]:checked').val();
    console.log("the sign is: " + sign);
});

var theSign = sign;

res.render（'template.ejs'，{theSign：theSign}）;

</head>
    <body>
        <% for (var i = 0; i < allTheData.length; i++) { %>
        <h1>Hi <span id="first"><%=allTheData[i].first%></span><br/><br/></h1>
        <% } %>

        <h1> sign: <span id="sign"><%=theSign%></span></h1><br/> 
        <h2> what a great webapp </h2> 
    </body>
</html>

Answer 1

由于该表单是客户端DOM的一部分，并且EJS已通过服务器端代码转换为HTML：您需要通过HTTP请求将数据发送到服务器。

将表单控件放入<form>中，将action设置为Express代码中路由处理的URL，然后根据是否选择从查询字符串或请求正文中读取它使用GET or POST。根据需要处理数据，然后将其传递到an object as the argument to render()。

Answer 2

有一些方法可以将值传递到其他页面。其中之一是发出GET请求以提交表单字段：

<!-- view1.ejs -->
<form method="get" action="someRoute">
    <input name="imagePick" value="1" type="radio" id="one">
    <input name="imagePick" value="2" type="radio" id="two">
    <input type="submit" value="Submit" />
</form>

映射表单路由（“ someRoute”）并获取提交的值：

var express = require('express');
var app = express();
app.get('someRoute', function (req, res) {
    var radioButtonVal = req.query.imagePick;
    res.render('myView', { myData: radioButtonVal /* <<< passing received data to view */ });
});

渲染视图：

<!-- view2.ejs -->
<body>
    <% if (myData == "1") { %>
        <div></div>
    <% } else if (myData == "2") { %>
        <div></div>
    <% } else { %>
        <div></div>
    <% } %>
</body>

如何将变量从javascript文件传递到服务器到ejs模板

2 个答案: