web-dev-qa-db-ja.com

HTMLフォームからNode.jsサーバーにデータを送信する

Node.jsを学んでいます。

私は私のサーバーにこれを持っています：

var http = require("http");
var url = require("url");

http.createServer(function(request, response){
    response.writeHead(200, {"Content-Type":"text/plain"});
    var params = url.parse(request.url,true).query;

    console.log(params);

    var a = params.number1;
    var b = params.number2;

    var numA = new Number(a);
    var numB = new Number(b);

    var numOutput = new Number(numA + numB).toFixed(0);

    response.write(numOutput);
    response.end();
}).listen(10000);

次のようなURL：localhost:10000/?number1=50000&number2=1ブラウザで50001をエコーするので、機能します。

Expressを使用せずに、HTMLを使用するフォームを介してこれらの2つのパラメーターを送信する必要があります。

これはどのように達成できますか？

javascripthtmlnode.jspost
6
Oscar Swanros

簡単な答えは <form method="get"> です。ブラウザは、フォームデータを既に処理しているクエリ文字列パラメータに変換します。

POSTが必要な場合は、HTMLフォームがリクエストエンティティボディとして投稿されます。ノードでは、ClientRequest（この例ではrequest変数）は、本体のチャンクがサーバーに到着するたびにdataイベントを発行します。 一度に全身を受け取ることはありません。全身を受け取るまでバッファリングしてから、データを解析する必要があります。

チャンクと通常のTransfer-Encodingのようなものや、ブラウザがフォームデータを送信する方法が異なるため、これを正しく行うのは困難です。 formidable （とにかくExpressが舞台裏で使用するもの）を使用するか、絶対に独自に実装する必要がある場合は、少なくともフォーム投稿の処理方法を調べます。 （実際、これは教育目的でのみ行ってください。最終的に本番環境に移行する可能性のあるものには、手ごわいものを使用する必要があることを強調することはできません。）

5
josh3736

翡翠のフォーム（Expressを使用していると仮定）は次のようになります。

form(action="/" method="post")
    input( name="whateverSearch" placeholder="search" autofocus)

次に、新しく送信されたデータポイントwhateverSearchを渡すには、req.bodyを使用してデータポイントを見つけます（以下を参照）。ここでは、データポイントを取得してコンソールに記録し、それをDOMとページのタイトルに送信しました。

router.post('/', function(req, res) {
    whateverSearch = req.body.whateverSearch;
    console.log(whateverSearch);
    res.render('index', { title: 'MyApp', inputData: whateverSearch});
});
3
maudulus

私はこの方法で問題を解決しました：

sum.js：

var http = require("http");
var url = require("url");

http.createServer(function(request, response){
    response.writeHead(200, {"Content-Type":"text/plain"});
    var params = url.parse(request.url,true).query;

    console.log(params);

    var a = params.number1;
    var b = params.number2;

    var numA = new Number(a);
    var numB = new Number(b);

    var sum = new Number(numA + numB).toFixed(0);

    response.write(sum);
    response.end();
}).listen(10001);

Index.html：

<html>
    <head>
            <title> Pedir random </title>

            <script type="text/javascript">
                function operacion(){
                        var n1 = document.getElementById("num1").value;
                        var n2 = document.getElementById("num2").value;

                        location.href = "http://localhost:10001" + "?number1=" + n1 + "&number2=" + n2;
                }
            </script>

    </head>

    <body>
            <h1>Inserte dos números </h1>
            <form id="forma1"> 
                <input type="text" id="num1"></input>
                <input type="text" id="num2"></imput>
                <input type="button" onClick="operacion()" id="enviar" value="enviar"></input>
            </form>
    </body>

<html>

それが正しい方法かどうかはわかりませんが、それで私のニーズは解決しました。

2
Oscar Swanros