快捷導(dǎo)航

JS中跳轉(zhuǎn)傳參的幾種常用方法總結(jié)

更新時(shí)間：2024年05月10日 10:13:57 作者：北原_春希

在前端開發(fā)中我們常常需要從一個(gè)跳到另一個(gè)頁面,并且將當(dāng)前頁面的數(shù)據(jù)傳遞過去,下面這篇文章主要給大家總結(jié)介紹了關(guān)于JS中跳轉(zhuǎn)傳參的幾種常用方法,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

1. 使用URL的查詢字符串

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

例如：

window.location.;

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

2. 使用HTML表單

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

例如：

<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>

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

3. 使用HTML5的History API

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

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

4. 使用第三方庫或框架

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

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

附：返回上一頁

1、在原來的窗體中直接跳轉(zhuǎn)用

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

實(shí)例：

1、

<input type=button value=刷新 onclick="window.location.reload()">  
<input type=button value=前進(jìn) onclick="window.history.go(1)">   
<input type=button value=后退 onclick="window.history.go(-1)">  
<input type=button value=前進(jìn) 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()">刷新當(dāng)前頁面</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>