Как передать переменную из файла javascript на сервер в шаблон ejs - PullRequest
Новая
       1

Как передать переменную из файла javascript на сервер в шаблон ejs

0 голосов
/ 06 мая 2019

В моем проекте я хочу, чтобы пользователь выбрал переключатель, затем на основе значения переключателя я хочу отобразить уникальную страницу. Я должен использовать шаблон 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>

Ответы [ 2 ]

1 голос
/ 06 мая 2019

Поскольку форма является частью DOM на стороне клиента, а EJS преобразуется в HTML с помощью кода на стороне сервера: вам необходимо отправить данные на сервер в виде HTTP-запроса.

ПоместитеЭлементы управления формы в <form>, установите action для URL-адреса, обрабатываемого маршрутом в вашем экспресс-коде, затем прочитайте его из строки запроса или тела запроса в зависимости от того, выбрали ли вы GET или POST .Обработайте данные так, как вам нравится, и затем передайте их в объект в качестве аргумента render().

0 голосов
/ 06 мая 2019

Есть несколько способов передать значения на другую страницу. Один из них делает 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>
...