フォームデータを取得するための Node.js メソッドの 3 つの例

序文

Nodejs はサーバーサイド言語です。開発中、登録やログインなどでは、判断のためにフォームを通じてバックエンドにデータを送信する必要があります。では、サーバーサイド言語として、Nodejs はどのような方法を使用して、呼び出しフォームの POST リクエスト値を受け取ることができるのでしょうか?

よく使われるのは以下の3つです。具体的な使い方を例とともに見ていきましょう。

バックエンドではExpressプラグインを使用しているため、簡単に読むにはExpressについてある程度の知識が必要です〜

1. まず、npmを初期化し、expressパッケージをダウンロードし、モジュールをインポートしてサービスオブジェクトを作成します。

//express モジュールをインポートします。const express = require("express");
// サーバー オブジェクトを作成します。const app = express();

フォームフォーム配信

フォームのこの機能を使用すると、フォーム内の送信タイプのボタンをクリックして、フォームデータを送信できます。フォームはオブジェクト形式です。属性名はinputタグ内の名前値、属性値はinputタグの値となります。具体的な書き方は以下の例のようになります。

<form action="/todata" method="POST">
        <テーブル>
            <tr>
                <td>名前</td>
                <td> <input type="text" name="user" id=""></td>
            </tr>
            <tr>
                <td>パスワード</td>
                <td> <input type="text" name="password" id=""></td>
            </tr>
            <tr>
                <button type="submit">送信</button>
            </tr>
        </テーブル>
</フォーム>

フォームの送信は POST リクエストであるため、バックエンドの Node.js コードは POST リクエストデータの応答ヘッダーを解析し、app.use(bodyParser.urlencoded({extended: false })) を使用してフロントエンドから渡されたデータを表現する必要があります。具体的なバックエンドコードは以下のとおりです。

定数 express = require("express");
express() は、定数です。
app.use(express.static("./"))
var bodyParser = require('body-parser')
// application/x-www-form-urlencoded レスポンス ヘッダーを解析します。app.use(bodyParser.urlencoded({ Extended: false }))
app.post("/todata",(req,res)=>{
    コンソールにログ出力します。
    res.send("送信に成功しました")
})
app.listen("80",()=>{
    console.log("成功");
})

ターミナルからノードコードを実行して結果を確認します

ajax リクエストの受け渡し

バックエンドにリクエストを送信する場合、get リクエストと post リクエストがよく使用されます。同様に、フォームデータは ajax post リクエストを介してバックエンドに送信できます。上記の例に基づいて、このメソッドのフロントエンドコードは次のようになります。

	 $("#inp3").on("クリック",function(){
        ユーザーを $("#inp1").val() とします。
        パスワードを$("#inp2").val()とします。
        $.ajax({
        url:"todata",
        タイプ:"投稿",
        データ：{
            ユーザー、
            パスワード
        },
        成功:(データ)=>{
            アラート(データ)
        }
         })
    })

ここでは、2 つの入力の値を取得し、送信ボタンをバインドして Ajax リクエストを送信します。バックエンドに送信されたデータは、データ属性に保存されます。バックエンドも req.body を通じてこれを取得します。フォームにアクション値を書き込む必要はなく、フォーム内のボタンはデフォルトの動作を防止する必要があることに注意することが重要です (そうしないと、クリック時にリクエストが直接送信され、Ajax リクエストが失敗します)。または、入力タグタイプをボタンタイプとして使用します。

フォームのシリアル化

この送信方法は、フォーム送信の一般的な方法です。リクエストは ajax 経由で送信され、name 属性はバックエンドの属性名として直接送信することもできます。上記2つの方法を組み合わせたものと言えます。

		$("#inp3").on("クリック",function(){
        $.ajax({
        url:"todata",
        タイプ:"投稿",
        データ:$("form").serialize(),
        成功:(データ)=>{
            アラート(データ)
        }
         })
    })

name 属性の値を取得するには、$("form").serialize() メソッドを使用するだけです。

要約する

これで、Node.js でフォームデータを取得する方法についての記事は終了です。Node.js でフォームデータを取得する方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: