【问题标题】:node.js & Express - cannot post form datanode.js & Express - 无法发布表单数据
【发布时间】:2014-11-13 03:41:55
【问题描述】:

大部分时间都在为此工作 - 和早上...... 我有一个大表格,可以在整个宪法文件的各个阶段收集 cmets。最后 - 用户提交表单并且表单重定向到 /构成-cmets(它应该!)这是一个 POST 路由。最终呈现的页面显示了 cmets(实际上将保存到 MongoDB,但我还没有那么远。

所以表单的基础是

<form class="form-horizontal" id="constitutionForm" action="../routes/constitution-comments" method="post" >
    <fieldset>
        <div class="form-group">
            <label class="control-label" for="GENERALComments">Your Comments</label>
                <div class="col-md-12">                     
                    <textarea class="form-control" id="GENERALComments" name="GENERALComments"></textarea>
                </div>
        </div>
    </fieldset>
<button class="btn btn-info" type="submit">Submit</button>
</form>

路线如下:

module.exports = function(server){

    server.post('/constitution', function(req, res){        
        res.render('./views/constitution/comments.ejs', {
            GENERALComments: req.body.GENERALComments,
        });
        // THIS IS NOT DISPLAYED
        console.log("\tIn /constitution POST");
    });
}

路径末尾的 console.log 没有显示,所以我似乎没有到达这里!

正在渲染(或不渲染)的视图如下所示:

<div class="container">
  <div class="row">
    <div class="col-lg-12 center ">
        <h1 class="text-shad">
            Your Draft Constitution Comments
        </h1>
    </div>
    <div>
        <%= GENERALComments %>
    </div>
</div>

我的路线和视图是这样排列的:

完整的应用程序可以在这里找到: [到目前为止的完整应用][2]

为了清楚起见:服务器是 express app.js

如何将表单数据发送到 POST?

更新:完整代码

server.js

console.log("Adding Requires");
var express = require('express');
var fs = require('fs');
var path = require('path');
var urlEncoded = require('urlencoded-request-parser');
var mongoose = require('mongoose');
var bodyParser = require('body-parser');
var override = require('method-override');
var rest = require('node-restful');

console.log("Creating Server Object");
var server = express();
server.locals.moment = require('moment');
server.set('ServerVersion', "5.0.1.7");

console.log("Server setting port");
var port = process.env.port || 1337;

console.log("Server setting \'Require Models\'");
var modelsPath="./models/"; 
fs.readdirSync(modelsPath).forEach(function(file) {
    var models=modelsPath+file;
    var bfile = path.basename(file,'.js');
    console.log("\tAdding model: " + bfile)
    require(models)(server);
});


console.log("Connecting to MongooseDB");
mongoose.connect("mongodb://mvm-mongodb.cloudapp.net/ccslabs-main");

var db = mongoose.connection;
db.on('error', console.error.bind(console, 'connection error:'));
db.once('open', function callback () {
  console.log('Connected to MongoDB successfully');
});


server.use('/constitution', function(req, res, next) {
  console.log('Request URL:', req.originalUrl);
  next();
}, function (req, res, next) {
  console.log('Request Type:', req.method);
  next();
});

server.use('/constitution-comments', function(req, res, next) {
  console.log('Request URL:', req.originalUrl);
  next();
}, function (req, res, next) {
  console.log('Request Type:', req.method);
  console.log('Request Body:', req.body )
  console.log('Request Content-Type: ', req.get('Content-Type'));
  next();
});

server.use('/comments', function(req, res, next) {
  console.log('Request URL:', req.originalUrl);
  next();
}, function (req, res, next) {
  console.log('Request Type:', req.method);
  next();
});

server.disable('x-powered-by');

console.log("Server setting \'Server.Uses\'");
server.use(urlEncoded());
server.use(bodyParser.urlencoded({extended: true}));
server.use(bodyParser.json());
server.use(override());

// this middleware will be executed for every request to the app
// server.use(function (req, res, next) {
//  console.log('Time: %s : Req: %s', server.locals.moment(),req.ip );
//  next();
// })

console.log("Server setting \'Require Routes\'");
var routePath="./routes/"; 
fs.readdirSync(routePath).forEach(function(file) {
    var route=routePath+file;
    var models=modelsPath+file;
    var bfile = path.basename(file,'.js');
    console.log("\tAdding route: " + bfile)
    require(route)(server);
});

console.log("\tAdding Static Files\' routes");
server.use(express.static(__dirname + "/content"));

console.log("Server creating \'Server.Sets\'");
server.set('view engine', 'ejs');
server.set('views', __dirname);
server.set('Content-Type','application:json')
// Why does the version not display??
server.set('ver',"0.0.2.8")
console.log("Server Version: "+ server.ver);

server.listen(port);
console.log("Server listening on port " + port);

完整的代码可以在这里找到:Github link (temporary)

【问题讨论】:

  • 您能否显示您正在使用/加载/constitution POST 路由的代码?

标签: javascript node.js forms mongodb form-submit


【解决方案1】:

&lt;form&gt; 上的 action 不正确。应该是(假设 server 是您的 Express app 而不是已安装的路由器):action="/constitution"

【讨论】:

  • 那仍然行不通。那它不会被路由到 consitution.js 吗?里面只有一个 GET - POST 在 cmets.js 中
  • 路由在什么文件中并不重要。您在某处添加了 /constitution POST 路由,这就是您期望表单转到的位置,假设就像我说的那样 @987654327 @ 不是已安装的路由器。
  • 不确定它是否是已安装的路由器 - 我认为可能是:P 我已经编辑了问题并将完整的源代码回购链接添加到 Github
【解决方案2】:

已解决

上述问题的解决方法如下。

1) 我在 Action 和 Route 文件中将路由改回“/post-put”。 2) 我在表单中添加了 enctype="multipart/form-data"。

所以表单现在看起来像

<form method="post" action="/post-put" enctype="multipart/form-data"> 
    <fieldset>

        <!-- Form Name -->
        <legend>Which Test Type</legend>

        <!-- Multiple Radios (inline) -->
        <div class="form-group">
            <label class="col-md-2 control-label" for="TestType">Please test our</label>
            <div class="col-md-4"> 
                <label class="radio-inline" for="TestType-0">
                    <input type="radio" name="TestType" id="TestType-0" value="SoftwareTest" checked="checked">
                    Software
                </label> 
                <label class="radio-inline" for="TestType-1">
                    <input type="radio" name="TestType" id="TestType-1" value="HardwareTest">
                    Hardware
                </label>
            </div>
        </div>
    </fieldset>
    <input type='submit' class="btn btn-default" id='submit' value='Submit your Test'/>
</form>

替代解决方案

将表单 enctype 保留为 enctype="application/x-www-form-urlencoded" 在 App.js(我的 server.js)中删除 app.use(bodyparser.urlencoded()); 将 app.use(bodyParser.urlencoded({extended: true})); 更改为 app.use(bodyParser.urlencoded());

现在表单的 POST 方法可以工作了!感谢那些试图提供帮助的人。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2023-03-20
    • 1970-01-01
    • 1970-01-01
    • 2011-11-23
    • 2014-08-20
    • 2011-12-07
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多