jquery怎么实现页面跳转并传值-前端问答-PHP中文网

jquery怎么实现页面跳转并传值

PHPz

发布： 2023-04-07 09:13:23

原创

4493人浏览过

在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&amp;param2=value2

登录后复制

其中，?后面跟着的是参数列表，参数之间用&分隔。每个参数的格式都是参数名=值。比如：

http://www.example.com/page2.html?user=john&amp;age=30

登录后复制

在跳转到下一个页面时，可以通过URL参数的方式来传递参数，代码如下：

$(location).attr('href', '/page2.html?user=john&amp;age=30');

登录后复制

在下一个页面中，可以通过下面的方式来获取传递过来的参数：

牛面

牛面AI面试，大厂级面试特训平台

147

查看详情

var user = getUrlParameter('user');
var age = getUrlParameter('age');

登录后复制

其中，getUrlParameter是一个自定义的函数，具体实现如下：

function getUrlParameter(name) {
    name = name.replace(/[[]/, '\[').replace(/[]]/, '\]');
    var regex = new RegExp('[\?&amp;]' + name + '=([^&amp;#]*)');
    var results = regex.exec(location.search);
    return results === null ? '' : decodeURIComponent(results[1].replace(/+/g, ' '));
}

登录后复制

这个函数的作用是从URL参数列表中获取指定的参数值。如果找到了指定的参数，则返回它的值；否则返回空字符串。

三、使用jQuery实现页面跳转并传递参数的完整代码

下面是一个完整的例子，它演示了如何在jQuery中实现页面跳转并传递参数：

<!DOCTYPE html>
<html>
    <head>
        <meta charset=&quot;utf-8&quot;>
        <title>jQuery页面跳转并传递参数</title>
        <script src=&quot;https://code.jquery.com/jquery-3.6.0.min.js&quot;></script>
        <script type=&quot;text/javascript&quot;>
            function gotoPage2(name, age, gender) {
                // 构造URL参数
                var params = '?name=' + name + '&amp;age=' + age + '&amp;gender=' + gender;

                // 跳转到page2.html并传递参数
                $(location).attr('href', 'page2.html' + params);
            }
        </script>
    </head>
    <body>
        <div>
            <h3>页面一</h3>
            <button onclick=&quot;gotoPage2('Tom', '30', 'man')&quot;>跳转到页面二</button>
        </div>
    </body>
</html>

登录后复制

在上面的代码中，我们在页面一中添加了一个按钮，点击这个按钮就会跳转到页面二。在跳转到页面二的同时，我们将三个参数（名字、年龄、性别）以URL参数的形式传递给了页面二。在页面二中，可以通过getUrlParameter函数来获取这三个参数的值，代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset=&quot;utf-8&quot;>
        <title>页面二</title>
        <script src=&quot;https://code.jquery.com/jquery-3.6.0.min.js&quot;></script>
        <script type=&quot;text/javascript&quot;>
            $(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('[\?&amp;]' + name + '=([^&amp;#]*)');
                var results = regex.exec(location.search);
                return results === null ? '' : decodeURIComponent(results[1].replace(/+/g, ' '));
            }
        </script>
    </head>
    <body>
        <div>
            <h3>页面二</h3>
            <p>名字： <span id=&quot;name&quot;></span></p>
            <p>年龄： <span id=&quot;age&quot;></span></p>
            <p>性别： <span id=&quot;gender&quot;></span></p>
        </div>
    </body>
</html>

登录后复制

在上面的代码中，我们通过$(document).ready方法来初始化页面，在这个方法中调用getUrlParameter函数来获取参数的值，并将其显示在页面中。

总结

以上就是在jQuery中实现页面跳转并传递参数的方法。细心的读者可能已经发现，我们使用了一个自定义的函数getUrlParameter来获取URL参数的值。实际上，在任何JavaScript项目中，获取URL参数都是一个很常见的操作，因此我们最好把这个函数封装成一个通用的工具函数，以便在其他项目中也可以复用。

以上就是jquery怎么实现页面跳转并传值的详细内容，更多请关注php中文网其它相关文章！