时间戳

首页 > 解决方案 > 在 Node.js 和 Pug 中，从动态创建项目的表单中获取信息

javascript - 在 Node.js 和 Pug 中，从动态创建项目的表单中获取信息

问题描述

我正在尝试创建一个应用程序，该应用程序将让用户创建交易列表，现在当在主页上的表格上选择列表时，我被困在删除列表中。我有一个表单，我相信该表单将由从路由器传递到页面的数组中的数据填充。但是，每当我尝试使用 console.log 查看是否正在传递项目或是否可以接收数据时，我都会收到一个错误页面，指出传递的输入（选定）未定义。我是否遗漏了什么，或者这在 node.js/express 中是否可能？

这是哈巴狗页面上的代码，其中包含为列表制作表格和表格的表格

mixin getLists(listings)
    each item in listings
        tr
            td.listcell
                   input(type="checkbox" name="selected" value=item.numID)
            td.listcell #{item.name}
            td.listcell #{item.data}

block.content
    .holder
        .listtable
            h4.title Current Listings:
            form(method="post" action="/deleteListings")
                table.listings
                    tr
                        td.listcell
                        td.listcell Name
                        td.listcell Status
                        td.listcell Data
                        +pullinglists(lists)
                input(type="submit" value="Delete Selected Listings")

这是我的路由器中处理将列表推送到仪表板并尝试将其删除并尝试删除它们的站点的代码

const express = require('express');
const User = require('../core/user');
const router = express.Router();
const nodemailer = require('nodemailer');
const user = new User();

var listings = [];

router.get('/dashboard', (req, res, next)=> {
    let user = req.session.user;

    if(user)
    {
        res.render('dashboard', {opp:req.session.opp, name:user.username, listings:listings});
        return;
    }
    res.redirect('/');
});

router.post('/generateListing', (req, res, next)=>{
    if(req.body.name == null)
    {
        res.redirect('/dashboard');
    }
    var temp={name : req.body.name,
        status: "Pending",
        otherData: req.body.data,
        numID: numberID
    };
    numberID++;
    listings.push(temp);
    res.redirect('/dashboard');
});

router.post('/deleteListing', (req, res, next)=>{
    var i;
    console.log(selected.value);
    if(req.body.selected != null)
    {
        for(i=0; i<req.body.selected; i++)
        {
            //remove selected items from the array
        }
    }
    res.render('/dashboard');
});

我在某种程度上是节点和表达的初学者，所以如果我在这里遗漏了什么非常明显的东西，我深表歉意。

编辑- 感谢 MikZuit 指出我需要的更正。

代替

console.log(selected.value);

应该是

console.log(req.body.selected.value);

然后引导我删除表单条目

if(req.body.selected != null)
{
    var i;
    for(i=0; i<req.body.selected.length; i++)
    {
        var elementToBeDeleted = listings.indexOf(req.body.selected[i]);
        listings.splice(elementToBeDeleted, 1);
    }
}
res.redirect('/dashboard');

标签： javascripthtmlnode.jsformsexpress

解决方案

你在模板中有这个：

form(method="post" action="/deleteListings")

所以我希望在服务器端看到一些以此开头的代码：

router.post('/deleteListings', (req, res, next) => {

否则，表单将发布到哪里？

编辑：你想在你打电话之前添加这个app.listen：

app.use(express.json())

这样，您就可以访问req.body并获取包含您从表单发送的所有字段名称和值的对象。

您可能还需要在表单中设置application/x-www-form-urlencoded为Content-Type，我不确定默认值是什么，但这就是我使用的。

推荐阅读