首页 > 解决方案 > 无法使用 PUG 模板从引导模式发出 POST 请求

问题描述

在 Index.js 中:

const express = require('express');
var bodyParser = require('body-parser');
var multer = require('multer');
var upload = multer();
const app = express();
var fs = require("fs");
app.set('view engine', 'pug');
app.set('views','./views');
app.use(bodyParser.json()); 

app.use(bodyParser.urlencoded({ extended: false }))
var contents = fs.readFileSync("issue.json");
var jsonContent = JSON.parse(contents);

app.get('/', function(req, res){
res.render('issueTracker',{result:jsonContent.issueList, 
product:'Products'});
});

app.post('/add', function(req, res){
  console.log("req.body");
  res.send("ddsfdf");
})

app.listen(3000);

PUG 文件(views/issueTracker.pug) 包括所有 cdn 要求,如

link(rel="stylesheet" href="/bootstrap/bootstrap.css")
link(rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css")
script(type='text/javascript', src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js")
script(type='text/javascript', src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js")
script(type='text/javascript', src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js")


button.btn.btn-primary.btn-sm(type='button', data-toggle="modal" 
data-target="#myModal" style='margin-top: 2%') Add Issue

#myModal.modal
    form(action = "/add", method = "POST")
        .modal-dialog
            .modal-content
                .modal-header
                    h4.modal-title ADD ISSUE
                        button.close(type='button' data-dismiss="modal") ×

                 .modal-body
                     .form-group
                         label(for='Description') Description
                                textarea#Description.form-control(rows='2' name="Description")
                         label(for='Severity') Severity
                         select#Severity.custom-select.mb-3(name="Severity")
                             option(value='Minor') Minor
                             option(value='Major') Major
                             option(value='Critical') Critical
                          label(for='Status') Status
                          select#Status.custom-select.mb-3(name="Status")
                              option(value='Open') Open
                              option(value='In Progress') In Progress
                              option(value='Closed') Closed
                           label(for='Created') Created Date
                           input#Created.form-control(type="date" name="Created")
                           label(for='Resolved') Resolved Date
                           input#Resolved.form-control(type="date" name="Resolved")
                           button.btn.btn-info(type='submit' value="Submit" data-dismiss="modal")
                           button.btn.btn-danger(type='button' data-dismiss='modal') Close

我得到“get” api 响应,但“post” api 根本没有受到打击。当我在引导模式中按下提交按钮时,我需要提交表单数据,但问题是,post api 没有被命中。请帮助我,谢谢

标签: node.jsexpresspug

解决方案


尝试这个。(已删除data-dismiss="modal"

button.btn.btn-info(type='submit' value="Submit")

推荐阅读