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

フォームデータを取得するための 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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vueでフォームデータを取得する方法
  • Vueでデータリストを表示する方法
  • Vue フォーム値取得の例
  • Nodejsはネットワークデータを取得し、Excelテーブルを生成します
  • vue+nodejsを使って複数のテーブルデータを取得する方法の詳しい説明

<<:  MySQL はデータベースを動的に更新します スクリプト例の説明

>>:  PXEを使用してCentOS7.6を自動的にインストールする方法の詳細なチュートリアル

推薦する

CentOS ベースの OpenStack 環境の展開に関する詳細なチュートリアル (OpenStack のインストール)

エフェクト表示: 環境準備コントローラーノード: 6GB 4時間60GB/30GB/30GB計算ノー...

Windows システムの MySQL が中国語を入力および表示できない問題の解決方法

ステップ 1: メモ帳を使用して、MySQL インストール ディレクトリの「my.ini」ファイルを...

初心者向け入門チュートリアル⑨:ポータルサイトの構築方法

さらに、ブログ プログラムで構築された記事 Web サイトは常にブログのように見え、カスタマイズでき...

設計仕様に準拠した設計は良い設計でしょうか?

これまでの数年間、私はいわゆる「設計仕様」についてかなりの数の執筆やコンサルティングを行ってきました...

CentOS 7 に Percona Server+MySQL をインストールする

1. 環境の説明(1) CentOS-7-x86_64、カーネルバージョン uname -r は、 ...

Linuxのファイル操作の知識ポイントを詳しく解説

ファイル操作に関連するシステムコール作成するint creat(const char *ファイル名,...

CSS リスト モデルでのマーカー タグの使用

この記事では主に、 list-itemの下にある::master疑似要素、 list-style-i...

HTML テーブルタグチュートリアル (11): 水平方向の配置属性 ALIGN

水平方向では、テーブルの配置を左、中央、右に設定できます。基本的な構文<テーブル配置=&quo...

TypeScript マッピング型の詳細

目次1. マップされた型2. マッピング修飾子3. キーの再マッピング4. さらなる探究序文: Ty...

MySQL 5.7 で業務を停止せずに従来のレプリケーションを GTID レプリケーションに変更する例

GTID の利点により、従来のファイル POS ベースのレプリケーションを GTID ベースのレプリ...

印刷広告を成功させるための「3I」基準

国内の多くの広告主にとって、印刷広告の制作と評価は、しばしばかなり主観的です。自分の感情や美的感覚に...

DockerでSpring Bootアプリケーションを実行する方法

ここ数日、dockerでSpring Bootアプリケーションを実行する方法を勉強してきました。以前...

ポートマッピング後に Docker コンテナが突然接続に失敗する問題のトラブルシューティング プロセス

1. 背景通常、外部サービスを提供する必要がある Docker コンテナの場合、起動時に -p コマ...

Win7 での Mysql 5.7.17 winx64 インストール チュートリアル

ソフトウェア バージョンとプラットフォーム: MySQL-5.7.17-winx64、win7 Ho...

CSS を使用して固定左列と適応右列の 2 列レイアウトを実現する 4 つの方法

1. フロート+オーバーフロー:非表示このメソッドは主にオーバーフローを通じて BFC をトリガーし...