フォームデータを取得するための 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を自動的にインストールする方法の詳細なチュートリアル

推薦する

Nginx設定の原理と実装プロセスの詳細な説明https

Linuxユーティリティcertbotを使用してhttps証明書を生成するこのツールは Let&#...

ショートカットアイコンとアイコンコードの違いの紹介

ステートメント 1: <link rel="shortcut icon" ...

マルチコア CPU を使用して Linux コマンドを高速化する方法 (GNU Parallel)

非常に大量のデータ(数百 GB)を計算する必要があったことはありますか?または、その内部を検索したり...

MySQL ビュー管理ビューの例の詳細説明 [追加、削除、変更、クエリ操作]

この記事では、例を使用して MySQL ビューの管理ビュー操作について説明します。ご参考までに、詳細...

MySQL 5.7を完全にアンインストールするための詳細な手順

この記事は主に、MySQLを再インストールする際のクリーンでないアンインストールのさまざまな問題をま...

MySQL ソート機能の詳細

目次1. 問題のシナリオ2. 原因分析3. 解決策4. 知識を広げる4.1 クエリの最適化を制限する...

HTML の長いテキストは、タグの幅を超えると自動的に切り捨てられます。

長いテキストを表示する場合、C# 側で文字をインターセプトする必要があることがよくありますが、長いテ...

TomcatはXMLを解析し、リフレクションを通じてオブジェクトを作成します。

次のサンプル コードでは、Tomcat が XML を解析し、リフレクションを通じてオブジェクトを作...

Nginx インストールの詳細なチュートリアル

1. Nginxの簡単な紹介Nginx は、無料のオープンソースの高性能 HTTP サーバーおよびリ...

MySQLオンラインDDL gh-ostの使用の概要

背景: DBA として、大規模なテーブルの DDL 変更のほとんどは、Percona の pt-on...

テーブルを作成するための MySQL SQL ステートメントの詳細な概要

mysql テーブル作成 SQL ステートメントMySQL テーブルを作成するための一般的な SQL...

モバイル アプリのユーザー インターフェース設計に関する 10 のヒント

ヒント1: 集中力を保つ最高のモバイル アプリは、1 つのことを非常にうまく行うことに重点を置いてい...

CSS ボックスの折りたたみに対する 5 つの解決策

まず、ボックスコラプスとは何でしょうか?親ボックスの内側にあるべき要素が外側にあります。第二に、箱は...

黒、白、グレーの控えめでエレガントなウェブデザインを鑑賞

クラシックな色の組み合わせの中でも、黒、白、グレーの時代を超えた魅力を否定できる人はおそらくいないで...

MySQL 5.7 のルートパスワードログイン問題の解決策

前回の記事でMySQLサービスが起動しない問題が解決したと分かった後、パスワードなしでrootユーザ...