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 学習ノートテーブル関連

推薦する

Linux で XFS パーティション形式のルート ディレクトリを縮小する方法

目次序文システム環境現在のシステムパーティションレイアウトデータのバックアップレスキューモードに入る...

iframeノードの初期化の問題に関する議論

今日、ふとリッチテキストエディタの制作原理を見直してみようと思いました。それで、彼は何も言わずにそれ...

Vue が Ref を使用してレベル間でコンポーネントを取得する手順

VueはRefを使用してレベル間でコンポーネントインスタンスを取得します例の紹介開発プロセスでは、レ...

高性能な HTML アプリケーションを作成するためのヒント

Web ページのパフォーマンスを向上させるにはどうすればよいでしょうか?ほとんどの開発者は、Java...

アーティストの自己啓発におけるいくつかの経験

会社の影響力が拡大し、製品が改良され続けるにつれて、関連するイメージデザインもそれに追いつき、徐々に...

シンプルなフロントエンドのページング効果を実現する js

比較的シンプルな業務のプロジェクトもありますが、フロントエンドのページングを多用します。プラグインの...

Nofollowタグの書き方と使い方

「nofollow」タグは数年前に Google、Yahoo、Microsoft によって提案されま...

MySQL インデックスの使用方法 (単一列インデックスと複数列インデックス)

1. 単一列インデックスどの列にインデックスを作成するかを選択することは、パフォーマンス最適化プロ...

CentOS 7 で RPM パッケージを使用して MySQL 5.7.9 をインストールするチュートリアル

MySQL 5.7.9 のインストールチュートリアルを録画してみんなと共有しましょう環境の紹介:オペ...

MySQL 8.0.23 メジャーアップデート (新機能)

著者: Guan Changlong は、Aikesheng の配送サービス部門の DBA です。主...

SQL の左結合と右結合の原理と例の分析

テーブルが 2 つあり、テーブル A のレコードがテーブル B に存在しない可能性があります。左結合...

Centos8 で Apache httpd2.4.37 を使用して Web サーバーをインストールする詳細な手順

ステップ 1: yum install httpd -y #httpd サービスをインストールします...

Docker イメージを Docker Hub にプッシュする実装

イメージが正常にビルドされると、Docker 環境があれば使用できますが、イメージを Docker ...

Web デザイナーにはどのような知識体系が必要ですか?

製品設計者は、複雑で大規模な製造システムと多様な市場に直面しているため、知識体系には幅広さと深さの両...

mysql8.0.11 winx64 インストールと設定のチュートリアル

mysql 8.0.11 winx64のインストールチュートリアルは以下のように記録され、みんなと共...