ホームページ > ウェブフロントエンド > フロントエンドQ&A > パラメータを渡すHTMLページジャンプ

パラメータを渡すHTMLページジャンプ

WBOY
リリース: 2023-05-05 22:22:07
オリジナル
6564 人が閲覧しました

HTML ページ ジャンプ パラメータを渡すことは、Web 開発で一般的に使用されるテクノロジです。パラメータを渡すことにより、ページ間のデータ インタラクションと情報転送が実現され、よりパーソナライズされたサービスをユーザーに提供できます。この記事では、HTML ページ ジャンプを実装してパラメータを渡すいくつかの方法を紹介します。

1. URL パラメータの受け渡し

URL パラメータの受け渡しは、HTML ページにジャンプするときにパラメータを渡す最も一般的に使用される方法の 1 つです。 URL アドレスにパラメーター情報が含まれていることがよくあります (例:

http://www.example.com/index.php?id=10&name=test

where, after ? id=10&name) =test は渡されるパラメータ情報、id と name はパラメータ名、10 と test はパラメータ値です。具体的な実装方法は以下の通りです:

1. ソースページにリンクアドレスを定義します:

クリックしてジャンプ

このうち、target .htmlは対象ページのアドレス、?以降のid=10&name=testは渡すパラメータ情報です。

2. ターゲット ページのパラメータ値を取得します:

//id パラメータの値を取得します
var id = GetQueryString("id");
// name パラメータの取得
var name = GetQueryString("name");

//URL パラメータの取得
function GetQueryString(name){

var reg = new RegExp("(^|&)"+name+"=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if(r!=null)return  unescape(r[2]); return null;
ログイン後にコピー
ログイン後にコピー

}## の値

#Pass 上記のメソッドは、ターゲット ページで渡されたパラメータ情報を取得し、必要に応じて対応する操作を実行できます。

2. フォームの送信とパラメーターの受け渡し

フォームの送信は、HTML ページにジャンプしてパラメーターを渡すもう 1 つの一般的に使用される方法です。フォーム送信を通じて、指定したページにデータを転送し、ページ間のデータ対話を実現します。具体的な実装方法は以下のとおりです:

1. ソースページにフォームを定義します:

<input type="hidden" name="id" value="10">
<input type="hidden" name="name" value="test">
<input type="submit" value="提交">
ログイン後にコピー

このうち、action は対象ページのアドレス、method は送信メソッド、ここで送信するには get メソッドを使用します。 idとnameは渡されるパラメータ名、10とtestは渡されるパラメータ値です。

2. ターゲット ページのパラメータ値を取得します:

//id パラメータの値を取得します

var id = GetQueryString("id");
// name パラメータの取得
var name = GetQueryString("name");

//URL パラメータの取得

function GetQueryString(name){

var reg = new RegExp("(^|&)"+name+"=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if(r!=null)return  unescape(r[2]); return null;
ログイン後にコピー
ログイン後にコピー
}## の値

#Pass Form の送信では、複数のパラメータの受け渡しやファイルの受け渡しなど、より複雑なデータ転送を実装できます。

3. Cookie 転送パラメータ

Cookie はクライアントにデータを保存し、HTML ページ間でパラメータ情報を転送できるテクノロジーです。具体的な実装方法は次のとおりです:

1. ソース ページに Cookie を設定します:

document.cookie="id=10";

document.cookie="name=test ";


document.cookie を通じて cookie 情報を設定します。id と name は渡されるパラメータ名、10 と test は渡されるパラメータ値です。

2. ターゲット ページの Cookie 値を取得します:

//id パラメーターの値を取得します

var id = getCookie("id");

// name パラメータを取得します。値
var name = getCookie("name");

//指定された名前の Cookie 値を取得します。

function getCookie(name){

var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
if(arr=document.cookie.match(reg))
    return decodeURIComponent(arr[2]);
else
    return null;
ログイン後にコピー

}

Cookie を介してパラメータを渡すことで、異なるページ間でのデータ共有や情報伝達が実現できますが、Cookie に保存されるデータ量には制限があり、あまり大きなパラメータ情報を渡すことは適切ではないことに注意してください。

上記では、HTML ページにジャンプするときにパラメーターを転送するためのいくつかの方法を紹介しましたが、シナリオごとに異なる方法が適しています。フロントエンド開発者は、特定のニーズに応じてページ間のデータ対話と情報転送を実装するための適切な方法を選択し、よりパーソナライズされたサービスをユーザーに提供できます。

以上がパラメータを渡すHTMLページジャンプの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート