検索
ホームページウェブフロントエンドフロントエンドQ&Anodejsはジャンプ後のページを取得します

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 までご連絡ください。
Reactの限界は何ですか?Reactの限界は何ですか?May 02, 2025 am 12:26 AM

raceslimitationsinclude:1)asteeplearningcurveduetoitsvastecosystem、2)seochallengeswithsclient-siderEndering、3)潜在的なパフォーマンスのinlargeapplications、4)complenstatemanagementasappsgrow、and5)suneedtokeepupwithovolution

Reactの学習曲線:新しい開発者にとっての課題Reactの学習曲線:新しい開発者にとっての課題May 02, 2025 am 12:24 AM

ReactisChallengingを使用して、SteepLearNdParadigMshiftOconpontenAchitecture.1)startisofficialdocumentation forasolidfoundation.2)relondingjsxandjavascriptwithinit.3)LearntousefunctionalcompotontiTateを理解してください

反応の動的リストの安定したユニークなキーを生成する反応の動的リストの安定したユニークなキーを生成するMay 02, 2025 am 12:22 AM

coreChallengeingEneratingは、duniqueys consinistinsidentifientiversre-renderseforeffiencedomupdates.1)aseenaturalKeysisisisisisisisedisederiableiableiaibuniqueandStable.2)denatekeysBaseTheBasedOnMultipreattributive.2)を無効にすることを非難することを解決します

JavaScriptの疲労:Reactとそのツールで最新の状態を維持しますJavaScriptの疲労:Reactとそのツールで最新の状態を維持しますMay 02, 2025 am 12:19 AM

javascriptfatigueinReactismainageable with rikeislikedivedingingindininginginformationscors.1)whatyouneedwhenyouneedit、focusingonprojectrelevance.2)

UseState()フックを使用するコンポーネントをテストしますUseState()フックを使用するコンポーネントをテストしますMay 02, 2025 am 12:13 AM

ESTESTROACTCOMPONENTSINGTHESESTATEHOOK、USEJESTANDREACTINTINGLIBRARYTOSIMULATE INTERACTIONSIONDANDVERIFYISTAMESISINTHEUI.1)RENDERTHECONCENTANDCHECKECHINITATA.2)SimulateUserIractionSionsionsionsionsionsionslikeClickSorformSubmissions.3)

Reactのキー:パフォーマンスの最適化技術への深い飛び込みReactのキー:パフォーマンスの最適化技術への深い飛び込みMay 01, 2025 am 12:25 AM

keysinReactarecialforptimizingperformancebyididingineffictientListupdates.1)usekeystoidentifideidifyandtracklistelements.2)ArrayIndi​​cesassyStopreventPerformanceSues.3)suoseStableidedifierslikeItem.idtomaincomentaindtateandiproveperift

Reactのキーとは何ですか?Reactのキーとは何ですか?May 01, 2025 am 12:25 AM

ReactKeySareUniqueIdentifiersiersiderSuredStrovereconconiniationEfficiency.1)theyctrackChangesinListitems、2)sultanduniqueidentifiersiirsiTeemidssisssississmendを使用して、3)ArrayIndi​​cesAssayStopReventisSuseSUSEORINGを回避します

反応におけるユニークな鍵の重要性:一般的な落とし穴を避ける反応におけるユニークな鍵の重要性:一般的な落とし穴を避けるMay 01, 2025 am 12:19 AM

sinqueysarecrucialinReactforoptimizing andMaintainingcomponentStateIntegrity.1)useanaturaluniqueidentifierfromyourdataifaibable.2)ifnonaturalidentifierexists、発電済みのKeyusingingingingalibrarylikuuid.3)

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

DVWA

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

SublimeText3 英語版

SublimeText3 英語版

推奨: Win バージョン、コードプロンプトをサポート!

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。