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

javascript怎么實現頁面跳轉和傳值

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

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

一、JavaScript 實現頁面跳轉的方法

  1. window.location.href

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

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

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

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

  1. window.location.replace

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

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

對于這個方法而言，在進行頁面跳轉的同時是不能傳遞參數的。

  1. window.open

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

window.open("newpage.html");

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

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

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

  1. URL 傳參數

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

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

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

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

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

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

  1. sessionStorage

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

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

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

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

  1. localStorage

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

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

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

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

三、應用實例

下面是一個實際應用的例子，實現一個包含表單的頁面跳轉，并將表單中的數據傳遞到下一個頁面。

  1. 頁面一（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()">跳轉到頁面二</button> 
</form>  
<script>  
    /** 
      * 提交表單，跳轉到頁面二 
      */  
    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>

  1. 頁面二（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 參數 
      */  
    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 方法，將表單中的數據拼接成一個參數并傳遞到頁面二中。在頁面二中，會通過 getSearchParams 方法獲取 URL 參數并顯示在頁面上。

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

分享文章：javascript怎么實現頁面跳轉和傳值
轉載源于：http://www.chinadenli.net/article46/joejeg.html

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

廣告

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

成都網頁設計公司