html頁面跳轉傳遞參數

HTML頁面跳轉傳遞參數是Web開發中常用的技術，透過傳遞參數可以實現頁面之間的資料互動和資訊傳遞，為使用者提供更個人化的服務。本文將介紹如何實作HTML頁面跳轉傳遞參數的幾種方法。

一、URL參數傳遞

URL參數傳遞是最常用的HTML頁面跳轉傳遞參數的方法之一。我們常看到的URL位址中帶有參數訊息，例如：

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

##其中，?後的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;

}

透過以上方法可以在目標頁面中獲取到傳遞過來的參數信息，並根據需要進行相應的操作。

二、表單提交傳遞參數

表單提交是另一個常用的HTML頁面跳躍傳遞參數的方法。透過表單提交可以將資料傳遞到指定頁面，實現頁面之間的資料互動。具體實作方式如下：

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;

}

透過表單提交可以實現更複雜的資料傳遞，例如傳遞多個參數或傳遞檔案等。

三、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中文網其他相關文章！