ホームページ  >  記事  >  ウェブフロントエンド  >  nodejsはジャンプ後のページを取得します

nodejsはジャンプ後のページを取得します

WBOY
WBOYオリジナル
2023-05-28 09:54:07671ブラウズ

Web 開発では、フォーム データを POST 経由で送信し、バックグラウンドで対応する処理を実行した後、別のページにジャンプする必要がある場合がよくあります。 Node.js をバックエンドとして使用する場合、POST リクエストのデータを取得し、それに応じて処理するにはどうすればよいですか?

この記事では、Node.js を使用して POST ジャンプ ページを取得する方法を紹介します。主に次の内容が含まれます。

  1. POST リクエストとジャンプ ページの原理を理解する
  2. Node.js を使用して POST リクエスト データを取得する
  3. POST リクエスト データを処理し、指定されたページにジャンプします
  4. デモの例

1. POST リクエストを理解するページの原理

  1. POST リクエスト

HTTP プロトコルには、GET と POST という 2 つの一般的なリクエスト メソッドがあります。 GET リクエストは既存のリソース (画像の表示など) をリクエストするために使用され、POST リクエストはサーバーにデータを送信するために使用されます。これらのデータは、フォーム データの送信など、リソースの作成または変更に使用されます。

  1. ページをジャンプ

Web アプリケーションでは、別のページにジャンプする必要があることがよくあります。ページにジャンプするには、HTTP 応答ヘッダーに Location を設定します。例:

HTTP/1.1 302 Found
Location: http://www.example.com/new-page.html

ブラウザがこの応答を受信すると、指定されたページに自動的にジャンプします。

2. Node.js を使用して POST リクエスト データを取得する

Node.js は、Web サーバーの作成に使用できる HTTP モジュールを提供します。 POSTリクエストデータを取得するには、リクエストイベントを使用できます。ブラウザがサーバーにリクエストを送信すると、サーバーはリクエスト イベントをトリガーし、リクエスト オブジェクトと応答オブジェクトを対応するコールバック関数に渡します。リクエスト イベントで POST リクエスト データを取得する手順は次のとおりです。

  1. コールバック関数に変数を作成して、ポスト リクエストの内容を保存します

    let postData = '';
  2. リクエスト データが受信されるたびにトリガーされるデータ イベントをリッスンします。

    req.on('data', chunk => {
        postData += chunk.toString();
    });

    req はリクエスト オブジェクトを指します。データはリクエスト オブジェクトに含まれるデータを表し、チャンクは受信したデータを表します。データブロック。

  3. データの受信が完了したことを示す終了イベントをリッスンします。

    req.on('end', () => {
        console.log(postData);
    });

    データの受信が完了すると、それに応じて postData を処理できます。

3. POST リクエスト データを処理し、指定されたページにジャンプします

POST リクエスト データを取得した後、対応する処理を実行し、指定されたページにジャンプする必要がありますページに具体的な実装手順は次のとおりです。

  1. Node.js の http モジュールとクエリ文字列モジュールを導入する

    const http = require('http');
    const querystring = require('querystring');
  2. リクエスト内の POST リクエスト データを処理するevent

    req.on('data', chunk => {
        postData += chunk.toString();
    });
    
    req.on('end', () => {
        const data = querystring.parse(postData);
        // 相应的处理逻辑
    });

    データを受信した後、querystring モジュールを使用して postData を JavaScript オブジェクトに変換し、処理を容易にすることができます。

  3. レスポンス ジャンプ ページ

    res.writeHead(302, {
        Location: '/new-page.html'
    });
    res.end();

    レスポンス ヘッダーの Location を、ジャンプ先のページのパスに設定します。

4. デモの例

デモの便宜上、ここでは Node.js の http モジュールを使用して POST リクエストを処理し、ジャンプする単純な Web サーバーをシミュレートします。新しいページに移動します。

const http = require('http');
const querystring = require('querystring');

const server = http.createServer((req, res) => {
    if(req.method === 'POST') {
        let postData = '';
        req.on('data', chunk => {
            postData += chunk.toString();
        });

        req.on('end', () => {
            const data = querystring.parse(postData);
            console.log(data);

            // 响应跳转到新页面
            res.writeHead(302, {
                Location: '/new-page.html'
            });
            res.end();
        });
    } else {
        res.writeHead(200, {'Content-Type': 'text/html'});
        res.write(`
            <form method="post">
                <input type="text" name="name" value=""/>
                <input type="submit" value="Submit"/>
            </form>
        `);
        res.end();
    }
});

server.listen(8000);

サーバー起動後、http://localhost:8000にアクセスすると、データ送信用の簡単なフォームページが表示されます。そして、フォームデータを送信すると、新しいページにジャンプします。

概要

上記の手順により、Node.js をバックエンドとして使用する場合、POST リクエストのデータを簡単に取得し、それに応じて処理し、指定したページにジャンプすることができます。実際のアプリケーションでは、特定のニーズに応じて対応する適応と改善を行うことができます。

以上がnodejsはジャンプ後のページを取得しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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