如何使用 express.router.post 从 HTML 表单传递输入

Question

我正在使用 express 和 nodejs 构建一个 mysql CRUD 应用程序，但是当我尝试从 HTML 表单发布用户输入时卡住了。这是我的一些代码。

物种.js

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

    let name = req.body.species_name;

    let message = '';

    let nameQuery = "SELECT * FROM `species` WHERE name = '" + name +"'";

    db.query(nameQuery, (err, result) => {

        if (err) {

            return res.status(500).send(err);

        }

        if (result.length > 0) {

            message = 'Species already exists.';

            res.render('list_species', {message: message});

        } else {

            let query = "INSERT INTO `species` (name, updatedAt, createdAt) VALUES ('" +

                name + "',NOW() ,NOW())";

            let tableQuery = "CREATE TABLE IF NOT EXISTS `" + name +

                "` (`chr` VARCHAR(10) NOT NULL, `chromStart` INT NOT NULL, `chromEnd` INT NOT NULL, `sequence` VARCHAR(100) NOT NULL, `length` INT, `strand` VARCHAR(1) NOT NULL)";

            db.query(query, (err, result) => {

                if (err) {

                    return res.status(500).send(err);

                }

                db.query(tableQuery, (err, result) => {

                    if (err) {

                        return res.status(500).send(err);

                    }

                    res.redirect('/species');

                })

            })

        }

    })

})

<div class="modal fade" id="addSpecies" tabindex="-1" role="dialog" aria-labelledby="addSpecies" aria-hidden="true">

    <div class="modal-dialog" role="document">

        <div class="modal-content">

            <div class="modal-header">

                <h5 class="modal-title" id="addSpecies">Add new species</h5>

                <button type="button" class="close" data-dismiss="modal" aria-label="Close">

                    <span aria-hidden="true">&times;</span>

                </button>

            </div>

抱歉编码不好。当我点击提交按钮时，页面没有给出任何答案，js console.log 也没有，我很困惑问题出在哪里。我是 javascript 的新手。我错过了什么？任何帮助将不胜感激。

Answer 1

按钮类型/名称Submit可能会让您感到困惑。Submit外部<form>标签只不过是任何其他没有任何意义的简单按钮。Submit将按钮保留在form类似于此示例的标签内