在JavaScript中，頁面跳轉并傳遞參數主要有以下幾種方法：

1. 使用URL的查詢字符串

這是最常見的方法，你可以在URL后面添加查詢字符串來傳遞參數。查詢字符串以?開始，參數之間用&分隔。

例如：

window.location.;

在接收頁面，你可以使用window.location.search來獲取查詢字符串，然后解析它來獲取參數。

2. 使用HTML表單

當提交HTML表單時，瀏覽器會向表單的action屬性指定的URL發(fā)送一個GET或POST請求，并將表單字段作為參數傳遞。

例如：

<form action="http://example.com/page" method="get">  
  <input type="text" name="param1" value="value1">  
  <input type="text" name="param2" value="value2">  
  <input type="submit" value="Submit">  
</form>

提交表單后，瀏覽器會跳轉到 http://example.com/page?param1=value1&param2=value2。

3. 使用HTML5的History API

HTML5引入了History API，允許你更靈活地操作瀏覽器的歷史記錄。你可以使用history.pushState()或history.replaceState()方法來添加或修改歷史記錄條目，而不會重新加載頁面。然后，你可以使用popstate事件來監(jiān)聽歷史記錄的變化。

雖然History API本身并不直接支持參數傳遞，但你可以將參數編碼到狀態(tài)對象中，或者將它們存儲在本地存儲（如localStorage或sessionStorage）中，并在需要時檢索它們。

4. 使用第三方庫或框架

如果你使用的是某個JavaScript框架（如React、Vue或Angular），那么該框架可能提供了自己的導航和參數傳遞機制。此外，還有一些第三方庫（如react-router、vue-router等）專門用于處理前端路由和參數傳遞。

請注意，選擇哪種方法取決于你的具體需求和使用的技術棧。對于簡單的頁面跳轉和參數傳遞，使用URL的查詢字符串可能就足夠了。然而，對于更復雜的應用程序，使用HTML5的History API或框架提供的機制可能更為合適。

附：返回上一頁

1、在原來的窗體中直接跳轉用

• window.location.href="test.html";  
• 2、返回上一頁原頁面中的表單中的數據會丟失
• window.history.go(-1);  
• 3、返回上一頁原頁面 表單中的內容會保留
• window.history.back();  

實例：

1、

<input type=button value=刷新 onclick="window.location.reload()">  
<input type=button value=前進 onclick="window.history.go(1)">   
<input type=button value=后退 onclick="window.history.go(-1)">  
<input type=button value=前進 onclick="window.history.forward()">   
<input type=button value=后退 onclick="window.history.back()">  

2、

<a href="javascript:history.go(-1)">返回上一頁</a>   
<a href="javascript:location.reload()">刷新當前頁面</a>   
<a href="javascript:" onclick="history.go(-2); ">返回前兩頁</a>   
<a href="javascript:" onclick="self.location=document.referrer;">返回上一頁并刷新</a>   
<a href="javascript:" onclick="history.back(); ">返回上一頁</a>   

總結

到此這篇關于JS中跳轉傳參的幾種常用方法的文章就介紹到這了,更多相關JS跳轉傳參方法內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論