JavaScriptを使用してWebページにパラメータを渡してページをジャンプする機能を実装する方法-フロントエンドQ&A-php.cn

JavaScriptを使用してWebページにパラメータを渡してページをジャンプする機能を実装する方法

PHPz

リリース： 2023-04-25 18:52:02

オリジナル

1156 人が閲覧しました

インターネットの急速な発展に伴い、あるページから別のページに情報を転送する必要がある 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 サイトの他の関連記事を参照してください。