JavaScript怎麼實現網頁傳參跳頁功能

隨著網路的快速發展，越來越多的網頁需要將資訊從一個頁面傳遞到另一個頁面。傳統的方法是使用GET或POST請求，但這種方式需要伺服器端的支持，並且不能直接跳轉頁面。而JavaScript實現網頁傳參跳轉頁面，無需伺服器支持，可以直接跳到目標頁面。

一、取得參數值

在JavaScript中，可以透過window.location.search取得跳轉頁面時傳遞的參數值。例如，在index.html頁面跳到detail.html頁面，並且傳遞了一個參數值name=Tom，可以使用下列程式碼來取得傳遞的參數值：

var search = window.location.search;
alert(search); // ?name=Tom

如果要取得特定的參數值，需要對search進行處理，可以使用正規表示式或字串截取的方法。以下是使用正規表示式取得name參數值的程式碼：

var search = window.location.search;
var reg = new RegExp("(^|&)name=([^&]*)(&|$)");
var result = search.substr(1).match(reg);
var name = result[2];
alert(name); // Tom

二、傳遞參數值

在JavaScript中，可以使用window.location.href實作頁面跳轉，並且傳遞參數值。例如，在index.html頁面跳到detail.html頁面，並且傳遞一個參數值name=Tom，可以使用以下程式碼：

var name = "Tom";
window.location.href = "detail.html?name=" + name;

三、完整範例

##以下是一個完整的範例，展示如何使用JavaScript實作網頁傳參跳轉頁面：

index.html頁面：

nbsp;html>


  <title>Index Page</title>


  <h1 id="Index-Page">Index Page</h1>
  <button>Go to Detail Page</button>

  <script>
    function gotoDetail() {
      var name = "Tom";
      window.location.href = "detail.html?name=" + name;
    }
  </script>

detail.html頁面：

nbsp;html>


  <title>Detail Page</title>


  <h1 id="Detail-Page">Detail Page</h1>
  <p></p>

  <script>
    window.onload = function() {
      var search = window.location.search;
      var reg = new RegExp("(^|&)name=([^&]*)(&|$)");
      var result = search.substr(1).match(reg);
      var name = result[2];
      document.getElementById("name").innerHTML = "Hello, " + name + "!";
    }
  </script>

在index.html頁面上，有一個按鈕，點擊按鈕可以跳到detail.html頁面，並且傳遞了一個參數值name=Tom。在detail.html頁面上，透過JavaScript取得傳遞的參數值，並將它顯示在頁面上。

透過上述範例，我們可以看到JavaScript實作網頁傳參跳轉頁面非常簡單，沒有伺服器端的限制，並且可以實現頁面跳轉和參數傳遞的功能。在實際開發中，可以根據自己的需求進行更多的擴展和最佳化。

以上是JavaScript怎麼實現網頁傳參跳頁功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！