nilai pas lompat halaman javascript

Dalam pembangunan bahagian hadapan, lonjakan halaman dan isu pemindahan nilai sering terlibat. JavaScript ialah bahasa yang digunakan secara meluas yang boleh digunakan untuk melompat ke halaman dan lulus parameter. Artikel ini akan memperkenalkan kaedah lompat halaman JavaScript dan pemindahan nilai, serta menyediakan beberapa contoh aplikasi.

1. Cara melaksanakan lompat halaman menggunakan JavaScript

1. window.location.href

window.location.href digunakan untuk memuatkan halaman baharu . Melalui kaedah ini, anda boleh melompat ke halaman yang ditentukan pada halaman semasa. Sebagai contoh, kod berikut boleh melompat ke halaman yang ditetapkan sebagai "newpage.html" pada halaman semasa:

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

Halaman sedang berjalan Semasa melompat, anda juga boleh menghantar parameter ke halaman baharu. Contohnya:

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

2. window.location.replace

Satu lagi cara untuk melaksanakan lompatan halaman adalah dengan menggunakan window.location.replace. Fungsi kaedah ini adalah untuk menggantikan halaman semasa dengan halaman baru. Contohnya, kod berikut akan digantikan dengan halaman yang dinyatakan sebagai "newpage.html" pada halaman semasa:

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

Untuk ini Dari segi kaedah, parameter tidak boleh dilalui semasa melompat ke halaman.

3. window.open

window.open membenarkan membuka halaman web tertentu dalam tetingkap penyemak imbas baharu. Sebagai contoh, kod berikut akan membuka halaman yang dinyatakan sebagai "newpage.html" dalam tetingkap baharu:

window.open("newpage.html");

Begitu juga, Parameter juga boleh dilalui melalui kaedah ini. Contohnya:

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

2. Kaedah lulus parameter halaman JavaScript

1. Pelulusan URL Parameter

Pengalihan parameter URL ialah kaedah yang mudah dan mudah digunakan untuk menghantar parameter halaman ke halaman baharu sebagai parameter dalam URL. Contohnya:

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

Dalam halaman baharu, anda boleh menggunakan objek URLSearchParams dalam JavaScript untuk mendapatkan parameter dalam URL. Contohnya:

//Dapatkan parameter dalam URL
const searchParams = new URLSearchParams(window.location.search);

//Dapatkan nama pengguna
const username = searchParams. get('username');

//Get age
const age = searchParams.get('age');

2. sessionStorage

sessionStorage ialah penyelesaian storan Web yang disediakan oleh HTML5 Ia serupa dengan localStorage, tetapi data yang disimpan adalah tahap sesi dan data akan dikosongkan apabila sesi tamat. Anda boleh menggunakan sessionStorage untuk menghantar data antara halaman. Contohnya, tetapkan parameter yang diluluskan dalam halaman sebelumnya:

//Tetapkan parameter yang diluluskan
sessionStorage.setItem('username', 'Tom');
sessionStorage.setItem('age' , 20);

Dalam halaman terakhir, anda boleh mendapatkan parameter yang diluluskan melalui sessionStorage:

//Dapatkan parameter yang diluluskan
const username = sessionStorage.getItem('username') ;
const age = sessionStorage.getItem('age');

3. localStorage

localStorage juga merupakan penyelesaian storan Web yang disediakan oleh HTML5. Data yang disimpan LocalStorage adalah kekal dan tidak akan dikosongkan walaupun halaman atau penyemak imbas ditutup. Anda boleh menggunakan localStorage untuk menghantar data antara halaman. Sebagai contoh, tetapkan parameter yang diluluskan dalam halaman sebelumnya:

//Tetapkan parameter yang diluluskan
localStorage.setItem('username', 'Tom');
localStorage.setItem('age' , 20);

Dalam halaman terakhir, anda boleh mendapatkan parameter yang diluluskan melalui localStorage:

//Dapatkan parameter yang diluluskan
const username = localStorage.getItem('username') ;
const age = localStorage.getItem('age');

3. Contoh Permohonan

Berikut ialah contoh aplikasi praktikal untuk melaksanakan lompatan halaman yang mengandungi borang, dan Lulus. data dari borang ke halaman seterusnya.

1. Halaman 1 (index.html)

8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e

rreee

4f7e9ee3c387fa7cd73e9b3fa70c81fd
3c30aa6c4c72dd8ead30672a51b803a7

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

493a3ce9d2a3c91fa60924ecf20a1e6a
73a6ac4ed44ffec12cee46588e518a5e

2. Halaman Dua (halaman Dua.html)

8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1 >

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

36cc49f0c466276486e50c850b7e4956

73a6ac4ed44ffec12cee46588e518a5e

Dalam halaman satu, apabila butang hantar diklik, kaedah submitBorang akan dilaksanakan untuk menyambung data dalam borang menjadi parameter dan Lulus ke halaman dua. Dalam halaman dua, parameter URL diperoleh melalui kaedah getSearchParams dan dipaparkan pada halaman.

Ringkasan

Artikel ini memperkenalkan kaedah lonjakan halaman JavaScript dan pemindahan nilai, serta menyediakan beberapa contoh aplikasi, bertujuan untuk membantu pembaca memahami dan menguasai teknologi ini dengan lebih baik. Dalam pembangunan sebenar, kaedah yang sesuai harus dipilih mengikut situasi untuk menjadikan lonjakan halaman dan pemindahan nilai lebih mudah, lebih cekap dan lebih selamat.

Atas ialah kandungan terperinci nilai pas lompat halaman javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!