ajaxはnodejsリクエストを送信します-フロントエンドQ&A-php.cn

ホームページ

ウェブフロントエンド

フロントエンドQ&A

ajaxはnodejsリクエストを送信します

PHPz

May 08, 2023 am 10:05 AM

注: この記事では、ajax を使用してフロントエンドの観点から nodejs リクエストを送信する方法を紹介します。nodejs に詳しくない場合は、まずそれについて学ぶことができます。

Web 開発の継続的な発展に伴い、フロントエンドとバックエンド間のデータ対話は、多くの Web サイトやアプリケーションの重要な機能の 1 つになりました。フロントエンドテクノロジの重要な部分として、Ajax はページを更新せずに非同期リクエストとデータ対話を実現できます。バックエンドテクノロジの一般的な選択肢として、Node.js は HTTP リクエストと応答を処理するための便利な API も提供します。

それでは、Ajax を使用して Node.js リクエストを送信するにはどうすればよいでしょうか?以下の観点から紹介していきます。

Node.js サービスのインストールと開始

まず、Node.js をインストールし、Node.js サービスを作成する必要があります。 Node.js のインストール手順は完了しているものとして、ここでは紹介しません。

次に、プロジェクトが存在するフォルダーをコマンドラインに入力し、次のコマンドを実行します。

$ npm init -y
$ npm install express --save

ログイン後にコピー

上記のコマンドは、Node.js プロジェクトを初期化し、Express フレームワークをインストールします。次に、app.js という名前のファイルを作成し、その中に次のコードを追加します。

const express = require('express');
const app = express();

app.get('/api', (req, res) => {
  res.json({"message":"Hello World!"});
});

app.listen(3000, () => {
  console.log('Listening on port 3000');
});

ログイン後にコピー

上記のコードは、「Hello World!」JSON オブジェクトを含むメッセージを返す /api という名前のルートを作成します。 Node.js サービスは、開始後にポート 3000 をリッスンします。

次のコマンドを実行して Node.js サービスを開始します:

$ node app.js

ログイン後にコピー

ブラウザで http://localhost:3000/api にアクセスすると、次の内容が表示されるはずです:

{"message":"Hello World!"}

ログイン後にコピー

これは、Node.js サービスが正常にセットアップされ、HTTP リクエストを処理できることを示しています。

Ajax を使用して HTTP リクエストを送信する

次に、Ajax を使用して、フロントエンドページの Node.js サービスにリクエストを送信します。ここでは jQuery を例に挙げますが、まず jQuery ライブラリを html ファイルに導入する必要があります。 CDN を使用して導入することも、jQuery ファイルをローカルに直接ダウンロードすることもできます。

次のコードを HTML ファイルに追加します:

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/jquery"></script>
  <meta charset="utf-8">
  <title>Ajax Demo</title>
</head>
<body>
  <button id="btn">发送请求</button>
  <script>
    $(document).ready(function(){
      $('#btn').click(function(){
        $.ajax({
          url: '/api',
          type: 'GET',
          dataType: 'json',
          success: function(data){
            console.log(data);
          },
          error: function(xhr, status, error){
            console.log(error);
          }
        });
      });
    });
  </script>
</body>
</html>

ログイン後にコピー

上記のコードはボタンを作成します。ボタンがクリックされると、jQuery の $.ajax() 関数を使用して GET リクエストが Node に送信されます。 .js サービスの /api ルート。リクエストが成功すると、サーバーから返された JSON オブジェクトがコンソールに出力されます。

セレクターを通じて対応する DOM 要素を選択し、イベント処理関数をバインドして、ページとバックエンド間のデータ対話を実現できます。これは、Ajax を使用する最も重要な方法の 1 つです。

Node.js リクエストの処理

最後に、リクエストを Node.js サービスで処理する必要があります。次のコードを app.js に追加します。

app.use(express.static('public'));

app.get('/', (req, res) => {
  res.sendFile(__dirname+'/public/index.html');
});

ログイン後にコピー

上記のコードは、静的ファイルサービスを Node.js サービスに追加し、ホームページをパブリックフォルダー内のindex.html ファイルに設定します。

これで、ブラウザで http://localhost:3000 を開き、「リクエストの送信」ボタンをクリックすると、サーバーから返された JSON オブジェクトがコンソールに出力され、ページには「Hello」も表示されます。世界!」というメッセージ。

概要

この記事では、Ajax を使用して Node.js リクエストを送信する方法を紹介し、フロントエンドとバックエンドがどのように対話するかを簡単に説明します。このようにして、フロントエンドはバックエンドと比較的簡単に対話できるようになり、より豊富な機能と優れたユーザーエクスペリエンスを実現できます。もちろん、Node.js の HTTP リクエストを処理する能力はこれをはるかに超えており、より複雑で完全な機能を使用するには、綿密な学習と実践が必要です。

以上がajaxはnodejsリクエストを送信しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。