Geek Answers Handbook

Express' render / redirect does not work if the call does not come from the submit method in the form

Task

Run the POST request from the JS method so that the variable values ​​can be sent as parameters.

Environment

  • NodeJS
  • Express
  • Bodyparser
  • Ejs

My first attempt

Frontend:

<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: ''
        });
    });
};

Result:

The rendering method will not display a new page. However, it will return the entire index.ejs file in the returnData parameter.

Server:

server result

Customer:

frontend result

Second attempt:

<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>

Result:

It works, but it is not a very clean solution.

My questions:

  • Why does the first attempt not work?
  • How can I send variables as parameters to a POST request with a nice clean solution?
+4
source share
1

jQuery, , , $.post AJAX , API .

, , ( method ). , jQuery, - POST, .

, (, , XHR API) <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>
+2

More articles:


All Articles