ノードはシンプルなフロントエンドとバックエンドの対話を実装します。
ノードはフロントエンドにとって必須のスキルです。ノードを学習する前に、ノードがフロントエンドとバックエンドの相互作用をどのように実装するかを理解する必要があります。この記事では、Node の簡単なフロントエンドとバックエンドの対話について説明します (例を示した説明)。編集者はこれがとても良いものだと思ったので、皆さんの参考として今から共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。
ここでは、ネイティブ ajax とノードの間の簡単な対話を示します。ノードを学習したばかりの友達は見てください。一方では、サーバーとクライアントがどのように対話するのかを理解し、他方では、ノード開発についての知識が深まります。
最初にコードを投稿します: (興味がある場合は、ローカルにコピーして自分で実行できます)
メイン ページの HTML
index.html:
<!doctype> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <button id="btn1">food</button> <button id="btn2">other</button> <h1 id="content"></h1> <script type="text/javascript" src="./client.js"></script> </body> </html>
次のステップはサーバー側のコードです。実行方法は、ノード環境でコマンドを入力することです:nodeserver.js
server.js:
let http = require('http');
let qs = require('querystring');
let server = http.createServer(function(req, res) {
let body = ''; // 一定要初始化为"" 不然是undefined
req.on('data', function(data) {
body += data; // 所接受的Json数据
});
req.on('end', function() {
res.writeHead(200, { // 响应状态
"Content-Type": "text/plain", // 响应数据类型
'Access-Control-Allow-Origin': '*' // 允许任何一个域名访问
});
if(qs.parse(body).name == 'food') {
res.write('apple');
} else {
res.write('other');
}
res.end();
});
});
server.listen(3000);によって導入されたqsモジュールは、JSON
req.on('data', callback);を解析するために使用されます。 // クライアントのデータを監視し、データが送信されたらコールバックを実行します。 Function
req.on('end', callback) // データ受信完了
res //
クライアント js に応答します (関数は一部の DOM 操作と Ajax リクエストの送信を担当します)
client.js:
let btn1 = document.getElementById('btn1');
let btn2 = document.getElementById('btn2');
let content = document.getElementById('content');
btn1.addEventListener('click', function() {
ajax('POST', "http://127.0.0.1:3000/", 'name='+this.innerHTML);
});
btn2.addEventListener('click', function() {
ajax('POST', "http://127.0.0.1:3000/", 'name='+this.innerHTML);
});
// 封装的ajax方法
function ajax(method, url, val) { // 方法，路径，传送数据
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if(xhr.readyState == 4) {
if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
content.innerHTML = xhr.responseText;
} else {
alert('Request was unsuccessful: ' + xhr.status);
}
}
};
xhr.open(method, url, true);
if(val)
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send(val);
}この単純な対話は次のようになります。 実際、私たちが最初にバックエンド言語を学ぶとき、最初に行うことはフロントエンド言語を書くことです。これは、フロントエンドとバックエンドの役割分担をより深く理解するのに役立ちます。
runメソッド:
まずserver.jsを実行し、次にhtmlを開いて応答をリクエストします。
関連する推奨事項:
フロントエンドとバックエンドの相互作用に関する関連コンテンツの概要
フロントエンドとバックエンドの相互作用を実現する Node.js+Koa フレームワーク
以上がノードはシンプルなフロントエンドとバックエンドの対話を実装します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
1674
14
1429
52
1333
25
1278
29
1257
24
Node V8 エンジンのメモリと GC の詳細な図による説明
Mar 29, 2023 pm 06:02 PM
この記事では、NodeJS V8 エンジンのメモリとガベージ コレクター (GC) について詳しく説明します。
Nodeのメモリ制御に関する記事
Apr 26, 2023 pm 05:37 PM
ノンブロッキングおよびイベント駆動に基づいて構築されたノード サービスには、メモリ消費量が少ないという利点があり、大量のネットワーク リクエストの処理に非常に適しています。大量のリクエストを前提として、「メモリ制御」に関する問題を考慮する必要があります。 1. V8 のガベージ コレクション メカニズムとメモリ制限 Js はガベージ コレクション マシンによって制御されます
Express を使用してノード プロジェクトでファイルのアップロードを処理する方法
Mar 28, 2023 pm 07:28 PM
ファイルのアップロードをどのように処理するか?次の記事では、Express を使用してノード プロジェクトでファイルのアップロードを処理する方法を紹介します。
PIノードティーチング：PIノードとは何ですか？ PIノードをインストールしてセットアップする方法は？
Mar 05, 2025 pm 05:57 PM
ピン張りのノードの詳細な説明とインストールガイドこの記事では、ピネットワークのエコシステムを詳細に紹介します - PIノードは、ピン系生態系における重要な役割であり、設置と構成の完全な手順を提供します。 Pinetworkブロックチェーンテストネットワークの発売後、PIノードは多くの先駆者の重要な部分になり、テストに積極的に参加し、今後のメインネットワークリリースの準備をしています。まだピン張りのものがわからない場合は、ピコインとは何かを参照してください。リストの価格はいくらですか？ PIの使用、マイニング、セキュリティ分析。パインワークとは何ですか？ピン競技プロジェクトは2019年に開始され、独占的な暗号通貨PIコインを所有しています。このプロジェクトは、誰もが参加できるものを作成することを目指しています
インターフェース設計書を共有する際の12の注意点
Apr 24, 2023 am 10:58 AM
最近、インターフェイス ドキュメントを確認していたときに、小規模パートナーによって定義されたパラメータが列挙値であることがわかりましたが、インターフェイス ドキュメントには対応する特定の列挙値が示されていませんでした。実際、インターフェイスドキュメントをうまく書く方法は非常に重要です。今日は、Tianluo 兄弟がインターフェース設計文書で注意すべき 12 のポイントをお届けします~
win11 で分割画面インタラクションを有効にする
Dec 25, 2023 pm 03:05 PM
win11 システムでは、画面分割インタラクションをオンにすることで、複数のモニターが同じシステムを使用して一緒に操作できるようにすることができます。しかし、多くの友人は、画面分割インタラクションをオンにする方法を知りません。実際には、画面分割インタラクションを有効にする方法を知りません。システム設定 以下は「起きて勉強してください」です。 win11 で分割画面インタラクションを開く方法 1. スタート メニューをクリックし、[設定] を見つけます。 2. そこで [システム] 設定を見つけます。 3. システム設定を入力したら、左側の「ディスプレイ」を選択し、右側の複数のディスプレイで「これらのディスプレイを拡張する」を選択します。
Vue3+TS+Vite 開発スキル: バックエンド API と対話する方法
Sep 08, 2023 pm 06:01 PM
Vue3+TS+Vite 開発スキル: バックエンド API と対話する方法 はじめに: Web アプリケーション開発では、フロントエンドとバックエンド間のデータ対話は非常に重要なリンクです。人気のあるフロントエンド フレームワークとして、Vue3 にはバックエンド API と対話するためのさまざまな方法があります。この記事では、Vue3+TypeScript+Vite 開発環境を使用してバックエンド API を操作する方法を紹介し、コード例を通じて理解を深めます。 1. Axios を使用してリクエストを送信します。
Nodeのプロセス管理ツール「pm2」を徹底分析
Apr 03, 2023 pm 06:02 PM
この記事では、Node のプロセス管理ツール「pm2」について説明し、pm2 が必要な理由、pm2 のインストール方法と使用方法について説明します。皆様のお役に立てれば幸いです。
