如果调用不是来自表单中的提交方法，则“快速”呈现/redirect不起作用
任务
从JS方法执行POST请求，以便可以将variables值作为参数发送。
环境
- 的NodeJS
- performance
- BodyParser
- EJS
我第一次尝试
前端：
<html> <head> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js'></script> <script type="text/javascript"> function postAnswer() { $.post('vote', { message: "hello!"}, function(returnedData) { console.log("Post returned data: " + returnedData); }); } </script> </head> <body> <button id='send' onClick='postAnswer()' class='btn btn-success btn-xs'>Svara</button> </body> </html> Server.js：
var express = require('express'); var app = express(); var bodyParser = require('body-parser'); app.use(bodyParser()); require('./app/routes.js')(app); app.set('view engine', 'ejs'); app.use('/public', express.static(__dirname + '/public')); var server = require('http').createServer(app); server.listen(8080); console.log('Server running on port 8080...');
routes.js：
module.exports = function(app) { app.get('/', function(req, res) { res.render('vote.ejs', { message: '' }); }); app.post('/vote', function(req, res) { var msg = req.body.message; console.log("Got POST request with message: " + msg); res.render('index.ejs', { message: '' }); }); };
结果：
渲染方法将不会呈现新的页面。 然而，它将返回returnedData参数中的整个“index.ejs”文件。
服务器：
客户：
第二次尝试：
<html> <head> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js'></script> <script type="text/javascript"> function postAnswer() { $.post('vote', { message: "hello!"}, function(returnedData) { console.log("Post returned data: " + returnedData); }); return false; } </script> </head> <body> <form action='/vote' method='post'> <button id='send' type='submit' onsubmit='return postAnswer()' class='btn btn-success btn-xs'>Svara</button> </form> </body> </html>
结果：
这确实有效，但这不是一个很干净的解决scheme。
我的问题：
- 为什么第一次尝试不工作？
- 我怎样才能发送variables作为一个很好的清洁解决schemePOST请求的参数？
我不是一个jQuery专家，但我认为第一次尝试不起作用，因为$.post发出一个AJAX请求，就像在单页面应用程序中与后台API交互一样。
你的第二个例子提交一个表单，这是一个浏览器内的动作，执行一个导航动作（如表单的method属性所指定的）。 在这种情况下，添加到jQuery中的事件监听器是多余的，应该删除 – 在表单提交其请求中的字段内容之前，它将创build另一个后台POST请求。
至于你的第二个问题，提交表单提交额外的variables（假设你真的想做一个导航的表单提交，而不是一个API的XHR背景请求）的方式是使用<input type="hidden">元素。
所以，总结一下，要做你在你的问题中描述的内容，你的例子HTML应该看起来像这样（减去注释）：
<!DOCTYPE html> <!-- only you can prevent quirks mode --> <html> <head> <meta charset="UTF-8"> <!-- ༼ つ ◕_◕ ༽つ Give UNICODE --> </head> <body> <form action='/vote' method='post'> <input type="hidden" name="message" value="hello!"> <button id='send' type='submit' class='btn btn-success btn-xs'>Svara</button> </form> </body> </html>