任务
从 JS 方法执行 POST 请求，以便可以将变量值作为参数发送。
环境
- Node
- express
- 正文解析器
- 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>
服务器.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: ''
});
});
};
结果:
render 方法不会呈现新页面。但是，它会在 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>
结果:
这确实有效，但它不是一个非常干净的解决方案。
我的问题:
- 为什么第一次尝试不成功？
- 如何使用干净的解决方案将变量作为参数发送到 POST 请求？
最佳答案
我不是 jQuery 专家，但我认为第一次尝试是行不通的，因为 $.post发出 AJAX 请求，就像您在单页应用程序中与后台 API 交互一样。
您的第二个示例提交了一个表单，这是一个执行导航操作的浏览器内操作(由表单的 method 属性指定)。在这种情况下，您在 jQuery 中添加的事件监听器是多余的，应该删除 - 它正在制作另一个背景 POST请求，在表单提交其在其请求中的字段内容之前。
关于你的第二个问题，通过表单提交来提交额外变量的方法(假设你真的想做一个导航表单提交而不是针对 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>
关于javascript - 如果调用不是来自表单中的提交方法，则 Express 的呈现/重定向不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29212414/