在Web应用程序中，页面跳转是非常常见的行为。而且，如果能够在跳转到下一个页面时传递一些值，那么就可以更加实现应用程序的灵活性和功能性。本篇文章将要介绍的就是jQuery中的页面跳转以及如何在跳转的同时传递参数。
一、jQuery页面跳转
在jQuery中，页面跳转可以通过下面的方式来实现：
$(location).attr('href', url);其中，$(location)表示当前URL，attr方法可以设置URL。url参数可以是一个相对路径，也可以是一个完整的URL地址。比如：
// 相对路径
$(location).attr('href', '/page2.html');
// 完整URL地址
$(location).attr('href', 'http://www.example.com/page2.html');二、在页面跳转时传递参数
在实际应用中，我们不仅要实现页面跳转，有时候还需要将当前页面的一些状态或者参数传递到下一个页面中，这时候可以通过URL参数的方式来实现。
在jQuery中，可以通过下面的方式来获取当前页面的URL：
var url = window.location.href;
这个url变量中就包含了当前页面的完整地址。在跳转到下一个页面时，我们可以在URL中添加一些参数。添加参数的格式如下：
http://www.example.com/page2.html?param1=value1&param2=value2
其中，?后面跟着的是参数列表，参数之间用&分隔。每个参数的格式都是参数名=值。比如：
http://www.example.com/page2.html?user=john&age=30
在跳转到下一个页面时，可以通过URL参数的方式来传递参数，代码如下：
$(location).attr('href', '/page2.html?user=john&age=30');在下一个页面中，可以通过下面的方式来获取传递过来的参数：
var user = getUrlParameter('user');
var age = getUrlParameter('age');其中，getUrlParameter是一个自定义的函数，具体实现如下：
function getUrlParameter(name) {
name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
var results = regex.exec(location.search);
return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
}这个函数的作用是从URL参数列表中获取指定的参数值。如果找到了指定的参数，则返回它的值；否则返回空字符串。
三、使用jQuery实现页面跳转并传递参数的完整代码
下面是一个完整的例子，它演示了如何在jQuery中实现页面跳转并传递参数：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery页面跳转并传递参数</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
function gotoPage2(name, age, gender) {
// 构造URL参数
var params = '?name=' + name + '&age=' + age + '&gender=' + gender;
// 跳转到page2.html并传递参数
$(location).attr('href', 'page2.html' + params);
}
</script>
</head>
<body>
<div>
<h3>页面一</h3>
<button onclick="gotoPage2(&#39;Tom&#39;, &#39;30&#39;, &#39;man&#39;)">跳转到页面二</button>
</div>
</body>
</html>在上面的代码中，我们在页面一中添加了一个按钮，点击这个按钮就会跳转到页面二。在跳转到页面二的同时，我们将三个参数（名字、年龄、性别）以URL参数的形式传递给了页面二。在页面二中，可以通过getUrlParameter函数来获取这三个参数的值，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>页面二</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// 获取从页面一传递过来的参数
var name = getUrlParameter('name');
var age = getUrlParameter('age');
var gender = getUrlParameter('gender');
// 显示参数的值
$('#name').text(name);
$('#age').text(age);
$('#gender').text(gender);
});
function getUrlParameter(name) {
name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
var results = regex.exec(location.search);
return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
}
</script>
</head>
<body>
<div>
<h3>页面二</h3>
<p>名字： <span id="name"></span></p>
<p>年龄： <span id="age"></span></p>
<p>性别： <span id="gender"></span></p>
</div>
</body>
</html>在上面的代码中，我们通过$(document).ready方法来初始化页面，在这个方法中调用getUrlParameter函数来获取参数的值，并将其显示在页面中。
总结
以上就是在jQuery中实现页面跳转并传递参数的方法。细心的读者可能已经发现，我们使用了一个自定义的函数getUrlParameter来获取URL参数的值。实际上，在任何JavaScript项目中，获取URL参数都是一个很常见的操作，因此我们最好把这个函数封装成一个通用的工具函数，以便在其他项目中也可以复用。
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
présentation du moteur MySQL
Comment résoudre le problème de l'absence du fichier msxml6.dll
Liste des clés d'activation de Windows 10
Que comprend le stockage par cryptage des données ?
Une liste complète des commandes alter dans Mysql
Comment fermer la fenêtre ouverte par window.open
iexplore.exe
Que dois-je faire si la carte d'itinéraire ne peut pas être ouverte ?
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
