javascript怎么實現(xiàn)頁面跳轉(zhuǎn)和傳值

本篇內(nèi)容介紹了“javascript怎么實現(xiàn)頁面跳轉(zhuǎn)和傳值”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！

成都創(chuàng)新互聯(lián)公司長期為上千多家客戶提供的網(wǎng)站建設服務，團隊從業(yè)經(jīng)驗10年，關注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為寶坻企業(yè)提供專業(yè)的成都網(wǎng)站設計、成都做網(wǎng)站，寶坻網(wǎng)站改版等技術服務。擁有10年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

一、JavaScript 實現(xiàn)頁面跳轉(zhuǎn)的方法

window.location.href

window.location.href 的作用是加載新的頁面。通過這個方法，可以在當前頁面跳轉(zhuǎn)到指定的頁面。例如，下面的代碼可以在當前頁面跳轉(zhuǎn)到被指定為 “newpage.html” 的頁面：

window.location.href = "newpage.html";

在進行頁面跳轉(zhuǎn)的同時，也可以向新頁面?zhèn)鬟f參數(shù)。例如：

window.location.href = "newpage.html?username=Tom&age=20";

window.location.replace

另一種實現(xiàn)頁面跳轉(zhuǎn)的方法是使用 window.location.replace。這個方法的作用是用新的頁面替換當前頁面。例如，下面的代碼將會在當前頁面被指定為 “newpage.html” 的頁面所替換：

window.location.replace("newpage.html");

對于這個方法而言，在進行頁面跳轉(zhuǎn)的同時是不能傳遞參數(shù)的。

window.open

window.open 允許以新的瀏覽器窗口方式打開一個指定的網(wǎng)頁。例如，下面的代碼將會在新的窗口中打開一個指定為 “newpage.html” 的頁面：

window.open("newpage.html");

同樣的，通過這個方法同樣可以傳遞參數(shù)。例如：

window.open("newpage.html?username=Tom&age=20");

二、JavaScript 頁面?zhèn)鲄⒌姆椒?/p>

URL 傳參數(shù)

URL 傳參數(shù)是實現(xiàn)頁面?zhèn)鲄⒌囊环N簡單易用的方法，它將參數(shù)作為 URL 中的參數(shù)傳遞給新頁面。例如：

window.location.href = "newpage.html?username=Tom&age=20";

在新頁面中，可以使用 JavaScript 中的 URLSearchParams 對象獲取 URL 中的參數(shù)。例如：

//獲取 URL 中的參數(shù)
const searchParams = new URLSearchParams(window.location.search);

//獲取用戶名
const username = searchParams.get('username');

//獲取年齡
const age = searchParams.get('age');

sessionStorage

sessionStorage 是 HTML5 提供的 Web 存儲方案，與 localStorage 相似，但是存儲的數(shù)據(jù)是會話級別的，當會話結(jié)束時數(shù)據(jù)會被清除。可以使用 sessionStorage 在頁面之間傳遞數(shù)據(jù)。例如，在前一個頁面中設置傳遞的參數(shù)：

//設置傳遞的參數(shù)
sessionStorage.setItem('username', 'Tom');
sessionStorage.setItem('age', 20);

在后一個頁面中，可以通過 sessionStorage 獲取傳遞的參數(shù)：

//獲取傳遞的參數(shù)
const username = sessionStorage.getItem('username');
const age = sessionStorage.getItem('age');

localStorage

localStorage 也是 HTML5 提供的 Web 存儲方案，與 sessionStorage 不同的是，localStorage 存儲數(shù)據(jù)是永久性的，即使關閉頁面或瀏覽器也不會被清除?？梢允褂?localStorage 在頁面之間傳遞數(shù)據(jù)。例如，在前一個頁面中設置傳遞的參數(shù)：

//設置傳遞的參數(shù)
localStorage.setItem('username', 'Tom');
localStorage.setItem('age', 20);

在后一個頁面中，可以通過 localStorage 獲取傳遞的參數(shù)：

//獲取傳遞的參數(shù)
const username = localStorage.getItem('username');
const age = localStorage.getItem('age');

三、應用實例

下面是一個實際應用的例子，實現(xiàn)一個包含表單的頁面跳轉(zhuǎn)，并將表單中的數(shù)據(jù)傳遞到下一個頁面。

頁面一（index.html）

<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8">  
<title>頁面一</title>

</head>
<body>

<form>  
    <div>  
        <label for="username">用戶名：</label>  
        <input type="text" id="username" name="username">  
    </div>  
    <div>  
        <label for="password">密碼：</label>  
        <input type="password" id="password" name="password">  
    </div> 
    <button type="submit" onclick="submitForm()">跳轉(zhuǎn)到頁面二</button> 
</form>  
<script>  
    /** 
      * 提交表單，跳轉(zhuǎn)到頁面二 
      */  
    function submitForm() {  
        const username = document.getElementById("username").value;  
        const password = document.getElementById("password").value;  
        const params = `username=${username}&password=${password}`;  
        window.location.href = `pageTwo.html?${params}`;  
    }  
</script>

</body>
</html>

頁面二（pageTwo.html）

<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8">  
<title>頁面二</title>

</head>
<body>

<div>  
    <p>用戶名:</p>  
    <p id="username"></p>  
</div>  
<div>  
    <p>密碼：</p>  
    <p id="password"></p>  
</div>  
<script>  
    /** 
      * 獲取 URL 參數(shù) 
      */  
    function getSearchParams() {  
        const searchParams = new URLSearchParams(window.location.search);  
        const username = searchParams.get('username');  
        const password = searchParams.get('password');  
        document.getElementById("username").innerText = username;    
        document.getElementById("password").innerText = password;    
    }  
    getSearchParams();  
</script>

</body>
</html>

在頁面一中，當點擊提交按鈕時，會執(zhí)行 submitForm 方法，將表單中的數(shù)據(jù)拼接成一個參數(shù)并傳遞到頁面二中。在頁面二中，會通過 getSearchParams 方法獲取 URL 參數(shù)并顯示在頁面上。

“javascript怎么實現(xiàn)頁面跳轉(zhuǎn)和傳值”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識可以關注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！

分享文章：javascript怎么實現(xiàn)頁面跳轉(zhuǎn)和傳值
轉(zhuǎn)載源于：http://chinadenli.net/article46/joejeg.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、定制網(wǎng)站、ChatGPT、小程序開發(fā)、Google、網(wǎng)站收錄

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

javascript怎么實現(xiàn)頁面跳轉(zhuǎn)和傳值