Dans le développement front-end, des problèmes tels que les sauts de page et le transfert de valeur sont souvent impliqués. JavaScript est un langage largement utilisé qui peut être utilisé pour accéder à des pages et transmettre des paramètres. Cet article présentera les méthodes de saut de page JavaScript et de transfert de valeur, et fournira quelques exemples d'application.
1. Comment implémenter le saut de page à l'aide de JavaScript
window.location.href est utilisé pour charger une nouvelle page. Grâce à cette méthode, vous pouvez accéder à la page spécifiée sur la page actuelle. Par exemple, le code suivant peut accéder à la page désignée comme "newpage.html" sur la page actuelle :
window.location.href = "newpage.html";
En sautant vers la page, vous pouvez également accéder à La nouvelle page passe des paramètres. Par exemple :
window.location.href = "newpage.html?username=Tom&age=20";
Une autre façon d'implémenter le saut de page consiste à utiliser window.location.replace. La fonction de cette méthode est de remplacer la page actuelle par une nouvelle page. Par exemple, le code suivant sera remplacé par la page spécifiée comme "newpage.html" sur la page actuelle :
window.location.replace("newpage.html");
Pour cette méthode, le saut de page est Paramètres ne peut pas être transmis lors du transfert.
window.open permet d'ouvrir une page Web spécifiée dans une nouvelle fenêtre de navigateur. Par exemple, le code suivant ouvrira une page spécifiée comme "newpage.html" dans une nouvelle fenêtre :
window.open("newpage.html");
De même, les paramètres peuvent également être transmis via cette méthode. Par exemple :
window.open("newpage.html?username=Tom&age=20");
2. Méthode de transmission des paramètres de page JavaScript
La transmission des paramètres d'URL est une façon de réaliser les paramètres de page passage Une méthode facile à utiliser qui transmet les paramètres à une nouvelle page en tant que paramètres dans l'URL. Par exemple :
window.location.href = "newpage.html?username=Tom&age=20";
Dans la nouvelle page, vous pouvez utiliser l'objet URLSearchParams en JavaScript pour obtenir les paramètres dans l'URL. Par exemple :
//Obtenir les paramètres dans l'URL
const searchParams = new URLSearchParams(window.location.search);
//Obtenir le nom d'utilisateur
const username = searchParams.get('username');
/ /Get Age
const age = searchParams.get('age');
sessionStorage est une solution de stockage Web fournie par HTML5. Elle est similaire à localStorage, mais les données stockées sont au niveau de la session. se termine, les données seront claires. Vous pouvez utiliser sessionStorage pour transmettre des données entre les pages. Par exemple, définissez les paramètres transmis dans la page précédente :
//Définissez les paramètres transmis
sessionStorage.setItem('username', 'Tom');
sessionStorage.setItem('age', 20);
After In une page, vous pouvez obtenir les paramètres transmis via sessionStorage :
//Obtenir les paramètres transmis
const username = sessionStorage.getItem('username');
const age = sessionStorage.getItem('age');
localStorage.setItem('username', 'Tom');
localStorage.setItem('age', 20);
after In une page, vous pouvez obtenir les paramètres transmis via localStorage :
const username = localStorage.getItem('username');
const age = localStorage.getItem('age'); Exemple d'application
Ce qui suit est un exemple d'application pratique pour implémenter un saut de page contenant un formulaire et transmettre les données du formulaire à la page suivante.
Page un (index.html)
<meta charset="UTF-8"> <title>页面一</title>
<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> <meta charset="UTF-8"> <title>页面二</title>