javascript - 如何从 .ejs 获取值到 javascript 文件

Question

我有一个 .ejs 文件，它实际上是一个下拉表单，它使用 sqlite3 数据库填充数据。现在我想做的是，当我从下拉列表中选择一个值时，我想将其发送回我的 javascript 文件，我将其保存到数据库中。

通常这对于我自己制作的 select 语句来说并不难，但是当这个 select 语句从 javascript 中填充时，发送回的值是 未定义，不知道为什么.

总结示例:

我有一个已登录的用户，并且可以选择在下拉菜单中保存锻炼。

锻炼表

ID:5

名称:二头肌

结果

锻炼

ID:1

名称:二头肌

锻炼 ID:5

我的代码

Javascript 到 .ejs

var Workout = bookshelf.Model.extend({
tableName: 'workout'
});

var Exercise = bookshelf.Model.extend({
tableName: 'exercise',
workout: function()
{
    return this.hasMany(Workout)
}
});

router.get('/', function (req, res) {
new Vaje().fetchAll().then(function (workout) {
    res.render('Exercise', { workout: workout });
}).catch(function (error) {
    console.log(error);
});
});

这会将 workout 表中的所有数据发送到 .ejs 上的选择表单

.ejs 文件

<h2>Select workout</h2>
<select>
<% workout.forEach(function(w) { %>
<option id=""
<%=w.attributes.id%>">
<%= w.attributes.name %>
</option>
<% }); %>
</select>
<br></br>
<form method="post">
<input type="submit" value="Add workout" />
</form>

javascript文件

此文件现在应该获取选定的值并将其保存到数据库...

router.post('/', function (req, res) {

var new_workout = req.body;

console.log("Workout: " + JSON.stringify(new_workout));

new Exercise().save(new_workout);
});

控制台结果

我不知道为什么该值未定义/为空，但我非常想找出答案。

任何帮助将不胜感激!

更新

更新2

解决方案

router.post('/', function (req, res) {
new Vaje({ 'id': parseInt(req.body.naziv) })
    .fetch()
    .then(function (new_workout) {
        if (new_workout != null)
            new Trening().save({
                vaje_id: new_workout.get("id"),
                naziv: new_workout.get("naziv")
            });
    });
});

Answer 1

问题是您的 ejs 文件。您已从表单中选择。

<h2>Select workout</h2>
<form method="post">

    <select name="workout">
        <% workout.forEach(function(w) { %>
            <option value="<%=w.attributes.id%>">
                <%= w.attributes.name %>
            </option>
        <% }); %>
    </select>
    <br></br>

    <input type="submit" value="Add workout" />
</form>

编辑 1您是否添加到您的应用程序(对于 Express 3)。

app.use(express.bodyParser());

需要处理帖子正文。

编辑 2 - Express v.4 的解决方案

首先你需要安装额外的软件包

npm install body-parser --save

稍后编辑您的应用:

var express = require('express'); // <- this is your code
var bodyParser = require('body-parser');

var app = express(); // <- this is your code
app.use(bodyParser.urlencoded({ extended: false }));

// and now app listen
app.listen(8888); // <- your port here

编辑3

如何获取姓名和 ID。事情会是这样的。

router.post('/', function (req, res) {
    new Workout({'id': parseInt(req.body.workout)})
        .fetch()
        .then(function(new_workout) {
            if(new_workout != null)
                new Exercise().save({
                    vaje_id: new_workout.get("id"),
                    name: new_workout.get("name")
                });
    });
});