如果调用不是来自表单中的提交方法，则 Express' render/redirect 不起作用

Question

任务

从 JS 方法执行 POST 请求，以便可以将变量值作为参数发送。

环境

NodeJS
快递
正文解析器
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: ''
        });
    });
};

结果：

呈现方法不会呈现新页面。但是，它会 return 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 请求？

Answer 1

我不是 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>

如果调用不是来自表单中的提交方法，则 Express' render/redirect 不起作用

Express' render/redirect does not work if the call isn't coming from a submit method in a form

javascript

ejs

node.js

express

body-parser

任务

环境

我的第一次尝试

结果：

第二次尝试：

结果：

我的问题：