从JS方法执行POST请求,以便可以将变量值作为参数发送。
前端:
<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...');
route.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方法不会渲染新页面。它在将返回但是整个“index.ejs”文件returnedData参数。
服务器:
客户:
<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>
这确实有效,但这不是一个很干净的解决方案。
我不是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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句