ホームページ > 記事 > ウェブフロントエンド > JavaScriptを使用してWebページにパラメータを渡してページをジャンプする機能を実装する方法
JavaScriptを使用してWebページにパラメータを渡してページをジャンプする機能を実装する方法
- PHPzオリジナル
- 2023-04-25 18:19:541045ブラウズ
インターネットの急速な発展に伴い、あるページから別のページに情報を転送する必要がある Web ページがますます増えています。従来の方法は GET または POST リクエストを使用することですが、この方法ではサーバー側のサポートが必要であり、ページに直接ジャンプすることはできません。 JavaScript は、サーバーのサポートなしで Web ページのパラメーター転送とジャンプ ページを実装し、ターゲット ページに直接ジャンプできます。
1. パラメータ値の取得
JavaScript では、window.location.search を通じてページにジャンプするときに渡されるパラメータ値を取得できます。たとえば、index.html ページがdetail.html ページにジャンプし、パラメータ値 name=Tom が渡された場合、次のコードを使用して、渡されたパラメータ値を取得できます。特定のパラメータ値を取得するには、検索を処理する必要がある場合は、正規表現または文字列インターセプト メソッドを使用できます。以下は、正規表現を使用して name パラメータ値を取得するコードです。
var search = window.location.search; alert(search); // ?name=Tom
2. パラメータ値を渡す
JavaScript では、window.location.href を使用してページ ジャンプを実現し、パラメータ値を渡します。たとえば、index.html ページからdetail.html ページにジャンプし、パラメータ値 name=Tom を渡すには、コード
var search = window.location.search;
var reg = new RegExp("(^|&)name=([^&]*)(&|$)");
var result = search.substr(1).match(reg);
var name = result[2];
alert(name); // Tom
3 を使用できます。完全な例
以下は完全な例です。 この例は、JavaScript を使用して Web ページ パラメーター ジャンプ ページを実装する方法を示しています。
index.html ページ:
var name = "Tom"; window.location.href = "detail.html?name=" + name;
detail.html ページ:
<!DOCTYPE html>
<html>
<head>
<title>Index Page</title>
</head>
<body>
<h1>Index Page</h1>
<button onclick="gotoDetail()">Go to Detail Page</button>
<script type="text/javascript">
function gotoDetail() {
var name = "Tom";
window.location.href = "detail.html?name=" + name;
}
</script>
</body>
</html>
inindex.html ページ上にはボタンがあり、ボタンをクリックするとdetail.htmlページにジャンプし、パラメータ値name=Tomが渡されます。 Detail.html ページで、渡されたパラメータ値を JavaScript 経由で取得し、ページ上に表示します。
上記の例を通して、JavaScript は Web ページのパラメーター ジャンプ ページを実装するのが非常に簡単で、サーバー側の制限がなく、ページ ジャンプとパラメーター転送の機能を実現できることがわかります。実際の開発では、ニーズに応じてさらに拡張や最適化を行うことができます。
以上がJavaScriptを使用してWebページにパラメータを渡してページをジャンプする機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。