序文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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: MySQL はデータベースを動的に更新します スクリプト例の説明
>>: PXEを使用してCentOS7.6を自動的にインストールする方法の詳細なチュートリアル
エフェクト表示: 環境準備コントローラーノード: 6GB 4時間60GB/30GB/30GB計算ノー...
ステップ 1: メモ帳を使用して、MySQL インストール ディレクトリの「my.ini」ファイルを...
さらに、ブログ プログラムで構築された記事 Web サイトは常にブログのように見え、カスタマイズでき...
これまでの数年間、私はいわゆる「設計仕様」についてかなりの数の執筆やコンサルティングを行ってきました...
1. 環境の説明(1) CentOS-7-x86_64、カーネルバージョン uname -r は、 ...
ファイル操作に関連するシステムコール作成するint creat(const char *ファイル名,...
この記事では主に、 list-itemの下にある::master疑似要素、 list-style-i...
水平方向では、テーブルの配置を左、中央、右に設定できます。基本的な構文<テーブル配置=&quo...
目次1. マップされた型2. マッピング修飾子3. キーの再マッピング4. さらなる探究序文: Ty...
GTID の利点により、従来のファイル POS ベースのレプリケーションを GTID ベースのレプリ...
国内の多くの広告主にとって、印刷広告の制作と評価は、しばしばかなり主観的です。自分の感情や美的感覚に...
ここ数日、dockerでSpring Bootアプリケーションを実行する方法を勉強してきました。以前...
1. 背景通常、外部サービスを提供する必要がある Docker コンテナの場合、起動時に -p コマ...
ソフトウェア バージョンとプラットフォーム: MySQL-5.7.17-winx64、win7 Ho...
1. フロート+オーバーフロー:非表示このメソッドは主にオーバーフローを通じて BFC をトリガーし...