序文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を自動的にインストールする方法の詳細なチュートリアル
Linuxユーティリティcertbotを使用してhttps証明書を生成するこのツールは Let...
ステートメント 1: <link rel="shortcut icon" ...
非常に大量のデータ(数百 GB)を計算する必要があったことはありますか?または、その内部を検索したり...
この記事では、例を使用して MySQL ビューの管理ビュー操作について説明します。ご参考までに、詳細...
この記事は主に、MySQLを再インストールする際のクリーンでないアンインストールのさまざまな問題をま...
目次1. 問題のシナリオ2. 原因分析3. 解決策4. 知識を広げる4.1 クエリの最適化を制限する...
長いテキストを表示する場合、C# 側で文字をインターセプトする必要があることがよくありますが、長いテ...
次のサンプル コードでは、Tomcat が XML を解析し、リフレクションを通じてオブジェクトを作...
1. Nginxの簡単な紹介Nginx は、無料のオープンソースの高性能 HTTP サーバーおよびリ...
背景: DBA として、大規模なテーブルの DDL 変更のほとんどは、Percona の pt-on...
mysql テーブル作成 SQL ステートメントMySQL テーブルを作成するための一般的な SQL...
ヒント1: 集中力を保つ最高のモバイル アプリは、1 つのことを非常にうまく行うことに重点を置いてい...
まず、ボックスコラプスとは何でしょうか?親ボックスの内側にあるべき要素が外側にあります。第二に、箱は...
クラシックな色の組み合わせの中でも、黒、白、グレーの時代を超えた魅力を否定できる人はおそらくいないで...
前回の記事でMySQLサービスが起動しない問題が解決したと分かった後、パスワードなしでrootユーザ...