时间戳

首页 > 解决方案 > POST 无法使用 express + bootstrap 模式工作

node.js - POST 无法使用 express + bootstrap 模式工作

问题描述

在客户端，模态定义为：

<div class="modal-content">
    <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">New message to undefined</h5>
        <button class="close" type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
    </div>
    <div class="modal-body">
        <form>
            <div class="form-group">
                <label class="col-form-label" for="tag-name">Tag:</label>
                <input class="form-control" id="tag-name" type="text">
            </div>
            <div class="form-group">
                <label class="col-form-label" for="url-name">URL:</label>
                <input class="form-control" id="url-name" type="text">
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" type="button" data-dismiss="modal">Close</button>
                <button class="btn btn-primary" type="submit">Save</button>
            </div>
        </form>
    </div>
</div>

在服务器端，app.js 定义为：

var express = require('express');
...
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
...
var app = express();
...
app.use('/', indexRouter);
app.use('/users', usersRouter);

在 ./routes/index.js 中，我有这个回调处理程序

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});


/* POST handler. */
router.post('/', function (req, res, next) {
  res.send('POST request to homepage');
  console.log('post received')
});

module.exports = router;

我期待这个结果：当点击保存按钮时，一个POST请求将被发送到服务器端。然后“收到的帖子”将打印在控制台日志中。但在我的实现中，什么也没发生。有什么不对的吗？

标签： node.jsexpresspostbootstrap-modal

解决方案

正如您在文档中发现的那样，您缺少属性action和标签。因此，当您按下浏览器时，不知道将数据发送到哪里。methodformSend

您可以尝试像下面的示例那样添加这两个属性吗？

<div class="modal-content">
    <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">New message to undefined</h5>
        <button class="close" type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
    </div>
    <div class="modal-body">
        <form method="localhost:3000" method="post">
            <div class="form-group">
                <label class="col-form-label" for="tag-name">Tag:</label>
                <input class="form-control" id="tag-name" type="text">
            </div>
            <div class="form-group">
                <label class="col-form-label" for="url-name">URL:</label>
                <input class="form-control" id="url-name" type="text">
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" type="button" data-dismiss="modal">Close</button>
                <button class="btn btn-primary" type="submit">Save</button>
            </div>
        </form>
    </div>
</div>

推荐阅读