HTML ページジャンプのパラメータ渡しの問題

HTML ページジャンプのパラメータ渡しの問題

効果は以下のとおりです。

ページ

ジャンプボタンをクリックした後

対応する値はページ b で取得できます。

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

ページ:

<!DOCTYPE html>
<html>
<head lang="ja">
    <メタ文字セット="UTF-8">
    <script src="js/jquery-3.0.0.min.js"></script>
    <script src="js/jquery.params.js"></script>
    <title>ページ</title>
    <スクリプト>
        $(関数(){
             名前 = $("#name").text();
             年齢 = $("#age").text();
            $("#btn").on("クリック",function(){
               ジャンプ1();
            });
        });
        関数ジャンプ1(){
            url = "b.html?name="+name+"&age="+age;//コンテンツはここに連結されます window.location.href = url;
        }
    </スクリプト>
</head>
<本文>
   <div id="name">トニー</div>
   <div id="年齢">23</div>
   <button id="btn">ジャンプ</button>
</本文>
</html>

ジャンプ先のページ b:

<!DOCTYPE html>
<html>
<head lang="ja">
    <メタ文字セット="UTF-8">
    <script src="js/jquery-3.0.0.min.js"></script>
    <script src="js/jquery.params.js"></script>
    <title>ページ b</title>
    <スクリプト>
        $(関数(){
           データを取得します。
        });
        関数 getData1(){
            var name = $.query.get("name");
            var 年齢 = $.query.get("年齢");
            $("#name").text(名前);
            $("#age").text(年齢);
        }
    </スクリプト>
</head>
<本文>
   <div id="名前"></div>
   <div id="年齢"></div>
</本文>
</html>

上記は、HTML ページ ジャンプでパラメータを渡す際の問題についてご紹介しました。お役に立てれば幸いです。ご質問がございましたら、メッセージを残していただければ、すぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。

<<:  CSS3 と JavaScript を使用して Web カラー ピッカーのサンプル コードを開発する

>>:  Bootstrap3.0 学習ノートテーブル関連

推薦する

CSS で順序付きリスト項目と順序なしリスト項目のスタイルを設定する方法

順序なしリストでは、順序なしリストのシンボルは各リストの前に表示されるドットです。順序付きリスト o...

ホバー生成の境界線によって生じる要素の移動を解決する方法

序文hover疑似クラスが要素に境界線を追加すると、要素内のコンテンツがずれることがあります。box...

Win10 での MySQL 8.0.15 のインストールと設定のチュートリアル

最近私が学んでいるのは MySQL の知識なので、MySQL をインストールすることが非常に重要です...

Linux で Spring Boot プロジェクトを開始および停止するためのスクリプトの例

Springboot プロジェクトを開始するには、次の 3 つの方法があります。 1. メインメソッ...

数百万のデータに対して MySQL クエリを最適化する 4 つの方法

目次1. 時間が経つにつれて限界が遅くなる理由2. 百万データシミュレーション1. 従業員テーブルと...

テーブルリストを破棄するには、標準のdl、dt、ddタグを使用します。

現在、ますます多くのフロントエンド開発者が、元のテーブル レイアウトを xHTML + CSS に置...

Electronで不規則な形状の透明部分をクリックする実装

目次不規則なフォームの実装透明な部分をクリックする不規則なフォームの実装ここでは円形フォームを実装し...

WebStormはVue3統合APIのソリューションを正しく識別できません

1 問題の説明Vue3 の統合 API は、defineComponent やその他の関数が認識でき...

WeChatミニプログラムビデオ集中砲火位置ランダム

この記事では、WeChatミニプログラムのビデオ弾幕の位置をランダム化するための具体的なコードを紹介...

初心者がHTMLタグを学ぶ(2)

初心者は、いくつかの HTML タグを理解することで HTML を学習できます。この入門書は、初心者...

JavaScript でサウンド効果付きの花火効果を実装する

コードを書くのに 30 分かかりましたが、この HTML5 Canvas New Year Fire...

JavaScript キャンバスはマウスの動きに合わせてボールを動かすことを実装します

この記事の例では、マウスに従ってボールを動かすjsの具体的なコードを参考までに共有しています。具体的...

MySQL チュートリアル データ定義言語 DDL の例 詳細な説明

目次1. SQL言語の基本機能の紹介2. データ定義言語の目的3. データベースの作成と破棄4. デ...

DockerプライベートライブラリHarborのアーキテクチャとコンポーネントの説明

この記事では、Harbor アーキテクチャの構成と、実行時に各コンポーネントを使用する方法について説...