異なるページ間の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 コードスキャン効果を実装する例

推薦する

Docker-compose を使用して Django アプリケーションをオフラインでデプロイする方法

目次開発環境用のDocker-ceをインストールする開発環境用のDocker-composeをインス...

Alibaba Cloud ECSインスタンスのユーザールートパスワードとリモート接続方法を設定する方法

Alibaba Cloud サーバーを購入した後、新しいインスタンスが正常に動作できるようにするには...

Linux での JDK と Tomcat のアップロードと設定に関する詳細なチュートリアル

準備1. 仮想マシンを起動する2. gitツールルートアカウントでログインルートアカウントを使用して...

mysqldump でデータベースをバックアップするときに特定のライブラリを除外する例

例: mysqldump –all-databases を使用すると、すべてのライブラリがエクスポー...

MySQL データベース接続例外の概要 (収集する価値あり)

Centos にプロジェクトをデプロイするときに奇妙な問題が見つかりました。データベース接続で例外...

Navicat Premium が MySQL 8.0 に接続してエラー「1251」を報告する問題を解決する方法の分析

長い間何もしていなかった人は、努力をすると一生懸命働いていると思うようになります。 1. 問題Nav...

nginx を介して方向プロキシを実装するプロセスの図

この記事は主に、nginx を介して方向プロキシを実装するプロセスを紹介します。この記事のサンプル ...

MACOS で MySQL ルートパスワードを忘れた場合の解決策

MySQL は、スウェーデンの会社 MySQL AB によって開発されたリレーショナル データベース...

CSS での三角形の描画と巧妙な応用例の詳細な説明

鉛Web ページ上の一般的な三角形の一部は、画像やフォント アイコンにする必要なく、CSS を使用し...

Tkinterはjsキャンバスを使用してグラデーションカラーを実現します

目次1. RGBを使用して色を表す2. Tkinter キャンバスコンポーネント3. グラデーション...

Vueのインストールと使用

目次1. Vueのインストール方法1: CDNの導入方法2: 直接ダウンロードしてインポートする方法...

js を使用してウォーターフォール効果を実現する

この記事の例では、滝の流れの効果を実現するためのjsの具体的なコードを参考までに共有しています。具体...

IE8対応のボーダー半径処理方法

canisue (http://caniuse.com/#search=border-radius)...