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

推薦する

MySql 5.7.17 winx64 のインストールと設定に関する詳細なチュートリアル

1. ソフトウェアをダウンロードする1. MySQL の公式サイトにアクセスし、Oracle アカウ...

JSのバイナリファミリーについての簡単な説明

目次概要ブロブBlob の動作BLOB ダウンロード ファイルブロブ画像のローカル表示BLOB ファ...

JavaScript の querySelector メソッドと getElementById メソッドの違いを分析する

目次1. 概要1.1 querySelector() と querySelectorAll() の使...

HTML で JavaScript の全選択/全選択解除操作を実行するサンプル コード

コードをコピーコードは次のとおりです。 <html> <ヘッド> <m...

検索エンジンのウェブサイトの入り口の無料コレクション

1: Baiduウェブサイトログイン入口ウェブサイト: http://www.baidu.com/s...

Web ページの HTML コードの説明: 順序付きリストと順序なしリスト

このセクションでは、HTML のリスト要素について学習します。リストは、Web サイトのデザインにお...

MySQL 8.0.12 解凍バージョンのインストールチュートリアル

この記事では、MySQL 8.0.12解凍版のインストールチュートリアルを参考までに紹介します。具体...

Vueカスタムコンポーネントは双方向バインディングを実装します

シナリオ:一般的に使用される親コンポーネントと子コンポーネント間の相互作用方法は次のとおりです。親コ...

jsプロキシの原理の詳細な説明

目次プロキシモードとは何ですか?実例を紹介例を使ってプロキシモデルの定義を理解するプロキシとはget...

フレックスレイアウトにおけるflex-growとflex-shrinkの計算方法の詳しい説明

CSS のFlex(彈性布局)すると、Web ページのレイアウトを柔軟に制御できます。Flex Fl...

Easyswoole ワンクリック インストール スクリプトとパゴダ インストール エラー

よくある質問easyswoole を初めて使用する場合は、次のような問題に遭遇することがよくあります...

Vue.js プロジェクトの開始方法

目次1. Node.jsとVue 2. ローカル開発環境でフロントエンドのVueプロジェクトを実行す...

JavaScript でプライベート変数を宣言する 2 つの方法

序文JavaScript は、キーワードを使用してプライベート変数を宣言できる他の言語とは異なります...

JavaScript 関数のコンテキストのルールは何ですか?

目次1. ルール 1: Object.Method() 1.1 ケース1 1.2 ケース2 1.3 ...