首页 > 解决方案 > 如何从节点,js中的表单获取输入数据

问题描述

我的 node.js 应用程序中有一个表单,我想从输入字段中获取数据并通过 POST 发送。post端点有效,我用Postman对其进行了测试,但是当我填写表单时,它只是将一个空对象发送到数据库而没有表单字段信息,我该如何实现呢?这是我的 ejs 表单:

<h1>Create a new post!</h1>
<form action="/post" method="POST">
    <div>
        <label for="title">Title</label>
        <input type="text" id="title" name="title" required>
    </div>
    <div>
        <label for="content">Post Content</label>
        <input type="text" id="content" name="content" required>
    </div>
    <div>
        <label for="categories">Categories</label>
        <input type="categories" id="categories" name="categories" required>
    </div>
    <div>
        <label for="date">Date</label>
        <input type="text" id="date" name="date" required>
    </div>
    <div>
        <label for="picture">Picture</label>
        <input type="text" id="picture" name="picture" required>
    </div>
    <button type="submit">Create Post!</button>
</form>

和我的 server.js:

const express = require('express');
const app = express();
const bodyParser = require('body-parser');
const cors = require('cors');

const mongoose = require('mongoose');
require('dotenv').config();
const BASE_URL = process.env.BASE_URL;
const PORT = process.env.PORT || 1337;
// let Post = require('./models/post.model.js');

app.use(cors());

app.use(bodyParser.json());

mongoose.connect(BASE_URL, { useNewUrlParser: true, useUnifiedTopology: true })

const connection = mongoose.connection;

connection.once('open', function () {
    console.log('Connection to MongoDB established succesfully!');
});

app.set('view-engine', 'ejs');

app.get('/', async (req, res) => {
    res.render('index.ejs');
});

app.get('/', async (req, res) => {
    res.render('login.ejs');
});

app.get('/post', async (req, res) => {
    res.render('post.ejs');
});

app.post('/post', async (req, res) => {
    let collection = connection.collection("posts_with_tags_test");
    res.setHeader('Content-Type', 'application/json');
    // let post = new Post(req.body);
    let post = {
        title: req.body.title,
        postContent: req.body.content,
        categories: req.body.categories,
        date: req.body.date,
        picture: req.body.picture
    }
    collection.insertOne(post)
        .then(post => {
            res.status(200).json({ post })
            console.log(post.title)
        })
        .catch(err => {
            res.status(400).send('failed')
        });
})

app.listen(PORT);

这是我的架构:

const mongoose = require('mongoose');
const Schema = mongoose.Schema;

let Post = new Schema({
    title: {
        type: String
    },
    postContent: {
        type: String
    },
    categories: {
        type: Array
    },
    date: {
        type: String
    },
    picture: {
        type: String
    }
});

module.exports = mongoose.model('Post', Post);

标签: javascriptnode.jsmongodbexpressmongoose

解决方案


改变这个:

app.use(bodyParser.json());

对此:

app.use(bodyParser.urlencoded({ extended: true}))

HTML 表单不会将 JSON 数据作为 post 请求发送,而是发送application/x-www-form-urlencoded数据,这些数据需要由正文解析器解码。


推荐阅读