jQuery跳转页面

发布时间：2023-05-19

jQuery是一种JavaScript库，通过简化HTML文档遍历与操作、事件处理、动画设计和Ajax交互等功能，使得Web开发变得更加快捷方便。而其中页面跳转也是常见的需求之一。本篇文章将从多个方面介绍如何使用jQuery进行页面跳转。

一、jQuery跳转页面怎么跳

jQuery跳转页面的方法是通过操作页面URL来实现，可以使用两个方法：window.location.href和location.replace()。 window.location.href可以理解为是整个窗口的位置，通过修改它可以实现页面跳转。示例代码如下：

$(document).ready(function() {
    $('#btnHref').click(function() {
        window.location.href = './new_page.html';
    });
});

上述代码使用jQuery选择器选取一个按钮，并通过click()方法注册点击事件，当用户点击按钮时，将当前页面跳转到指定的new_page.html页面。 另一个操作URL的方法是location.replace()，该方法在修改URL的同时，可以在浏览器的历史记录中去掉当前页面。示例代码如下：

$(document).ready(function() {
    $('#btnReplace').click(function() {
        location.replace('./new_page.html');
    });
});

通过上述代码，当用户点击按钮时，会将当前页面跳转到指定的new_page.html页面，并且浏览器的历史记录中不会出现跳转前的页面。

二、jQuery跳转页面带参数

在实际应用过程中，页面跳转往往需要传递参数。一种简单的实现方式是将参数以URL参数的形式拼接在URL后面。示例代码如下：

$(document).ready(function() {
    $('#btnHrefPara').click(function() {
        var para1 = 'hello';
        var para2 = 'world';
        window.location.href = './new_page.html?arg1=' + para1 + '&arg2=' + para2;
    });
});

上述代码将两个参数para1和para2拼接在跳转页面的URL后面，使用&符号分隔多个参数。在跳转到new_page.html页面后，可以通过window.location.search获取参数列表的字符串，进而解析出参数值。例如：

$(document).ready(function() {
    var arg1 = getQueryString('arg1');
    var arg2 = getQueryString('arg2');
    console.log(arg1, arg2); // 输出 hello world
});
function getQueryString(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) {
        return decodeURIComponent(r[2]);
    }
    return null;
}

上述代码使用getQueryString()函数获取URL参数，并打印出参数值。

三、jQuery跳转页面方法

除了上述提到的两种跳转方式，jQuery还提供了一些其他的页面跳转方法，如使用表单提交、使用AJAX请求等。 使用表单提交是一种常见的页面跳转方式，可以通过一个隐藏的表单实现，示例代码如下：

$(document).ready(function() {
    $('#btnSubmit').click(function() {
        var para1 = 'hello';
        var para2 = 'world';
        var form = $('<form></form>');
        form.attr('action', './new_page.html');
        form.attr('method', 'POST');
        form.append($('<input type="hidden" name="arg1" />').val(para1));
        form.append($('<input type="hidden" name="arg2" />').val(para2));
        $('body').append(form);
        form.submit();
    });
});

上述代码使用jQuery动态添加一个隐藏的表单，并将两个参数作为表单数据通过POST方法提交到new_page.html页面。 使用AJAX请求跳转页面可以实现无刷新跳转，而且可以在跳转前完成必要的数据处理。示例代码如下：

$(document).ready(function() {
    $('#btnAjax').click(function() {
        var para1 = 'hello';
        var para2 = 'world';
        $.ajax({
            url: './new_page.html',
            type: 'POST',
            data: {
                arg1: para1,
                arg2: para2
            },
            success: function() {
                console.log('AJAX请求成功');
            }
        });
    });
});

上述代码使用$.ajax()方法发起AJAX请求，并将两个参数作为请求数据通过POST方法提交到new_page.html页面。在请求成功回调函数中可以完成跳转前的数据处理操作。

四、jQuery跳转页面alert

当在页面跳转时，有时需要进行提示操作，可以使用JavaScript的alert()方法，也可以使用jQuery的alert()方法，两种方法实现的效果类似。 使用JavaScript的alert()方法可以直接在函数中调用，示例代码如下：

$(document).ready(function() {
    $('#btnHrefWithAlert').click(function() {
        alert('即将跳转到新页面');
        window.location.href = './new_page.html';
    });
});

上述代码在跳转之前使用alert()方法弹出提示框，告知用户页面即将跳转。 使用jQuery的alert()方法需要先引入jQuery UI库，然后调用alert()方法，示例代码如下：

$(document).ready(function() {
    $('#btnDialog').click(function() {
        $('<div></div>').html('即将跳转到新页面').dialog({
            title: '提示',
            buttons: {
                '确定': function() {
                    window.location.href = './new_page.html';
                    $(this).dialog('close');
                },
                '取消': function() {
                    $(this).dialog('close');
                }
            }
        });
    });
});

上述代码使用jQuery UI库的对话框组件，通过dialog()方法弹出对话框，并提示用户即将跳转页面。用户可以选择确定跳转或取消跳转。在用户点击确定按钮后，使用window.location.href跳转页面。

五、jQuery跳转页面传递参数

除了使用URL参数传递参数外，jQuery还提供了一些其他的传递参数方式，如使用cookie、使用localStorage等。 使用cookie可以将一些必要的参数保存在浏览器的cookie中，在页面跳转后可以通过读取cookie获取参数值。示例代码如下：

$(document).ready(function() {
    $('#btnSetCookie').click(function() {
        var para1 = 'hello';
        var para2 = 'world';
        document.cookie = 'arg1=' + para1;
        document.cookie = 'arg2=' + para2;
        window.location.href = './new_page.html';
    });
});
$(document).ready(function() {
    var arg1 = getCookie('arg1');
    var arg2 = getCookie('arg2');
    console.log(arg1, arg2); // 输出 hello world
});
function getCookie(name) {
    var arrCookies = document.cookie.split(';');
    for (var i = 0; i < arrCookies.length; i++) {
        var arr = arrCookies[i].split('=');
        if (arr[0].trim() == name) {
            return arr[1];
        }
    }
    return null;
}

上述代码在页面跳转前将两个参数以cookie的形式保存，并在跳转后通过getCookie()函数读取cookie中的参数值。 使用localStorage也可以将必要的参数保存在浏览器的缓存中，跳转后可以通过读取localStorage获取参数值。示例代码如下：

$(document).ready(function() {
    $('#btnSetLocalStorage').click(function() {
        var para1 = 'hello';
        var para2 = 'world';
        localStorage.setItem('arg1', para1);
        localStorage.setItem('arg2', para2);
        window.location.href = './new_page.html';
    });
});
$(document).ready(function() {
    var arg1 = localStorage.getItem('arg1');
    var arg2 = localStorage.getItem('arg2');
    console.log(arg1, arg2); // 输出 hello world
});

上述代码在页面跳转前将两个参数以localStorage的形式保存，并在跳转后通过localStorage.getItem()方法读取localStorage中的参数值。

六、HTML页面跳转

除了使用jQuery实现页面跳转外，HTML页面本身也提供了多种实现方式。常见的有超链接、form表单、JavaScript跳转等方式。 使用超链接实现页面跳转是最常见的方式，可以通过<a>标签添加href属性实现。示例代码如下：

<a href="./new_page.html">跳转到新页面</a>

使用表单实现页面跳转与jQuery中实现类似，可以通过<form>标签添加action属性实现。示例代码如下：

<form action="./new_page.html" method="POST">
    <button type="submit">提交跳转</button>
</form>

使用JavaScript实现页面跳转可以使用window.location.href或location.replace()方法，与jQuery中实现一致。示例代码如下：

<button onclick="window.location.href='./new_page.html'">跳转到新页面</button>

七、Ajax直接跳转页面

AJAX直接跳转页面是利用AJAX请求，以替代页面正常跳转实现页面切换的方法。示例代码如下：

$(document).ready(function() {
    $('.ajax-link').click(function(e) {
        e.preventDefault();
        var url = $(this).attr('href');
        var container = $('#container');
        container.fadeOut('slow', function() {
            container.load(url + ' #content', function() {
                container.fadeIn('slow');
            });
        });
    });
});

上述代码实现了在点击<a>标签后使用AJAX请求跳转页面的操作。使用e.preventDefault()方法阻止默认的页面跳转，然后使用load()方法加载指定的页面内容到指定的容器中。在加载完成后，使用fadeIn()方法显示容器的内容。

总结

本篇文章详细介绍了使用jQuery实现页面跳转的多种方式，包括常见的操作URL方法和AJAX请求方法，展示了传递参数、提示操作、html页面跳转等相关操作。通过学习这些内容，读者可以更加方便快捷地实现Web开发中的页面跳转需求。

推荐文章