4

仕事

変数値をパラメーターとして送信できるように、JS メソッドから POST 要求を実行します。

環境

  • NodeJS
  • 特急
  • 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>

サーバー.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...');

ルート.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」ファイル全体を返します。

サーバ：

サーバー結果

クライアント：

フロントエンドの結果

2 回目の試行:

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

結果：

これは機能しますが、あまりクリーンなソリューションではありません。

私の質問:

  1. 最初の試行が機能しないのはなぜですか?
  2. 変数をパラメーターとして POST リクエストに送信して、きれいなソリューションを作成するにはどうすればよいですか?
4

1 に答える 1

2

私は jQuery の専門家ではありません$.postが、単一ページのアプリでバックグラウンドで API と対話するのと同じように、AJAX 要求を行うため、最初の試行は機能しないと思います。

method2 番目の例では、(フォームの属性で指定された) ナビゲーション アクションを実行するブラウザー内アクションであるフォームを送信します。この場合、jQuery に追加したイベント リスナーは冗長であり、削除する必要があります。フォームがリクエストでフィールドのコンテンツを送信する前に、別のバックグラウンド リクエストを作成しています。POST

2 番目の質問については、フォーム送信で追加の変数を送信する方法 (実際には、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>
于 2015-03-23T14:30:08.863 に答える