異なるページ間のJavaScriptデータ転送(URLパラメータ取得)

異なるページ間のJavaScriptデータ転送(URLパラメータ取得)

Web ページでは、あるページに情報を入力すると、別のページにジャンプし、入力した情報が別のページに渡されるという状況によく遭遇します。これはどのように行われるのでしょうか。
今日は実際に試してみましょう。例えば、現在 2 つのページがあります。1 つのページでユーザー情報を入力すると、別のページにジャンプして、xx welcome to login インターフェースが表示されます。

まずはデザインのアイデアを見てみましょう。

  • 最初のログインページには送信フォームが含まれており、 action index.htmlページに送信されます。
  • 2ページ目は1ページ目のパラメータを使用できるため、異なるページ間でデータを転送する効果が得られます。
  • 2 番目のページでは、URL でlocation.searchパラメータを使用しているため、1 番目のページのデータを使用できます。
  • 2 ページ目で、このパラメータを抽出する必要があります。
  • 最初のステップは、 substrを使用して削除することです。
  • 2番目のステップは、split('=')を使用してキーと値を分離することです。
  • 最初の配列はキーで、2番目の配列は値です

実装コードは次のとおりです。

<本文>
    <フォームアクション="index.html">
        ユーザー名: <input type="text" name = 'uname'>
        <input type="submit" value="送信">
    </フォーム>
</本文>

<本文>
    <div><span style="font-weight:700; color:blue"></span>ログインへようこそ! </div>
    <スクリプト>
       var span = document.querySelector('span'); //span タグを取得します var myName = location.search.substr(1); //前のページで入力されたパラメータを取得します var arr = myName.split('='); //= 記号を使用してキーと値を分割します span.innerHTML = arr[1] + '' //データを span に渡します
    </スクリプト>
</本文>

実行効果は次のとおりです。

以上で、異なるページでのJavaScriptデータの送信(URLパラメータ取得)についての記事は終了です。異なるページでのJavaScriptデータの送信についての詳細は、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。

以下もご興味があるかもしれません:
  • フロントエンドJSがURLパラメータを取得する4つの方法のまとめ
  • ネイティブJSがURLリンクパラメータを取得するためのいくつかの一般的な方法
  • JavaScript に基づいて URL パラメータを取得する 2 つの方法
  • js で URL パラメータを取得するための getRequest() メソッドの例の詳細な説明
  • JSはURLパラメータを取得し、JSON形式でPOSTリクエストメソッドを送信します。
  • JavaScript で URL 内のクエリ文字列パラメータを取得する方法の詳細な説明
  • URLパラメータを取得するJavaScriptメソッド

<<:  入力ファイルの制御と美化について

>>:  CSS3 で QR コードスキャン効果を実装する例

推薦する

CSS3.0 でネオンボタンアニメーション効果を実装するためのサンプルコード

今日は、CSS 3.0 で実装されたネオン ボタン アニメーション効果を紹介します。効果は次のとおり...

IDEA が MySQL データベースに接続できない問題の 6 つの解決策

この記事では、IDEA が MySQL データベースに接続できない問題に対する 6 つの解決策を主に...

Ubuntu 20.04 と NVIDIA ドライバーのインストールに関するチュートリアル

Ubuntu 20.04をインストールする NVIDIAドライバーをインストールする Pytouch...

MySQL における tinyint と int の違いの詳細な説明

質問: int(1) と tinyint(1) の違いは何ですか?このような設計では、いずれにしても...

Linux に起動方法を追加する (サービス/スクリプト)

システムの起動時に読み込む必要がある設定ファイル/etc/profile、/root/.bash_p...

CSS ですべての子要素を選択し、スタイルを追加する方法

方法:実際のプロジェクトを例に挙げてみましょう。 .lk-ツールバー{ .el-入力{ 幅: 169...

JavaScript の基礎: エラーキャプチャメカニズム

目次序文エラーオブジェクト投げる試して…捕まえて…最後に最終ルールトライ/キャッチパフォーマンスウィ...

Mysqlのインポートとエクスポート時に発生する問題の解決

背景すべての業務を Docker の運用管理に移行してから、一連の落とし穴に遭遇しましたが、今回は ...

TypeScript でオブジェクト キーの値の範囲を制限する方法

TypeScript を使用する場合、TypeScript が提供する型システムを使用してコードのあ...

HTML の長いテキストは、タグの幅を超えると自動的に切り捨てられます。

長いテキストを表示する場合、C# 側で文字をインターセプトする必要があることがよくありますが、長いテ...

scss で mixin が動作しない問題の解決方法 (ブラウザでコンパイルできない)

ミックスインメソッド: ブラウザはコンパイルできません: 以前のバージョンのsassでは上記の記述方...

CSSスタイルとセレクターの使い方

HTML で CSS を使用する 3 つの方法: 1. インラインスタイル: 要素のスタイル属性を通...

CentOS サーバーに FFmpeg をインストールするための完全な手順

序文サーバーシステム環境は、CentOS 6.5 (最終) です。 FFmpeg をサーバーに正常に...

バックエンドから返される 100,000 個のデータをフロントエンドでより適切に表示するにはどうすればよいですか?

目次予備作業バックエンド構築フロントエンドページダイレクトレンダリングsetTimeout ページン...