如何將變量從javascript文件傳遞到服務器到ejs模板

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或POST從查詢字符串或請求正文中讀取它。 根據需要處理數據，然后將其作為對象的參數傳遞給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 個解決方案

解決方案1
1 2019-05-06 18:12:51

解決方案2
0 2019-05-06 18:52:36

如何將變量從javascript文件傳遞到服務器到ejs模板

問題描述

2 個解決方案

解決方案1 1 2019-05-06 18:12:51

解決方案2 0 2019-05-06 18:52:36

解決方案1
1 2019-05-06 18:12:51

解決方案2
0 2019-05-06 18:52:36