[英]node.js & Express - cannot post form data
Been working on this for most of the night - and morning... I have a large form which collects comments at various stages throughout a constitution document. 在整个晚上(和早晨)都在进行此工作……我有一个大型表格,可以收集整个宪法文件各个阶段的意见。 At the end - the user submits the form and the form redirects to /constitution-comments (well it should!) which is a POST route. 最后,用户提交表单,并将表单重定向到POST路由/ constitution-comments(应该!)。 The final rendered page shows the comments (which will actually be saved to MongoDB but I am not that far along yet. 最后呈现的页面显示了注释(实际上将被保存到MongoDB中,但距离我还不远。
So the basics of the form are 所以表格的基础是
<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>
The route looks like this: 路线如下所示:
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");
});
}
the console.log at the end of the route does not show up so it seems I am not getting here! 路由末尾的console.log没有出现,所以看来我不在这里!
the view being rendered (or not) looks like this: 正在渲染(或未渲染)的视图如下所示:
<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>
My routes and views are arranged like this: 我的路线和景观的排列方式如下:
the full application as it stands can be found here: [Full Application So Far][2] 完整的应用程序可以在这里找到:[到目前为止的完整应用程序] [2]
For clarity: server is the express app.js 为了清楚起见:服务器是Express app.js
How do I get the form data to POST? 如何将表单数据发送到POST?
UPDATE: COMPLETE CODE 更新:完整代码
server.js 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);
The full code can be found here: Github link (temporary) 完整的代码可以在这里找到: Github链接(临时)
Your action
on your <form>
isn't correct. 你的action
你对<form>
是不正确的。 It should be (assuming server
is your Express app
and not a mounted router): action="/constitution"
应该是(假设server
是您的Express app
而不是已安装的路由器): action="/constitution"
SOLVED 解决了
The resolution to the above problem was the following. 解决上述问题的方法如下。
1) I changed the route back to "/post-put" in the form Action and in the Route file. 1)我以动作形式和路径文件将路径更改回“ / post-put”。 2) I added enctype="multipart/form-data" to the form. 2)我在表格中添加了enctype =“ multipart / form-data”。
So the form now looks like 所以表格现在看起来像
<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>
ALTERNATIVE SOLUTION 替代解决方案
Keep the form enctype as enctype="application/x-www-form-urlencoded"
In App.js (my server.js) Remove app.use(bodyparser.urlencoded());
保持表单enctype为enctype="application/x-www-form-urlencoded"
在App.js(我的server.js)中,删除app.use(bodyparser.urlencoded());
Change app.use(bodyParser.urlencoded({extended: true}));
更改app.use(bodyParser.urlencoded({extended: true}));
to app.use(bodyParser.urlencoded());
到app.use(bodyParser.urlencoded());
Now the POST method of the form works! 现在,表单的POST方法有效! Thanks to those who tried to help. 感谢那些试图帮助的人。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.