jquery页面跳转及传参

发布时间：2023-05-19

一、jquery页面跳转的方法

在jQuery中，通常使用方法$(selector).click(function(){})来跳转页面。其中，selector为要点击的元素选择器，可以是id选择器、类选择器或标签选择器；click()是点击事件；function(){}是事件的具体操作。 代码示例：

$(document).ready(function(){
    $("#btn").click(function(){
        window.location.href= "http://www.example.com/";
    });
});

上面的代码中，当按钮id等于"btn"的元素被点击时，通过window.location.href来跳转到目标页面。

二、jquery点击跳转页面

使用jQuery的优点在于可以在点击事件中执行页面跳转操作，可以达到良好的用户体验。 代码示例：

$(document).ready(function(){
    $("a").click(function(event){
        event.preventDefault();
        var href = $(this).attr('href');
        window.location.href= href;
    });
});

上面的代码中，当a标签被点击时，事件被触发。涉及到阻止默认跳转操作，然后获取点击元素的href属性，并通过window.location.href来跳转到目标页面。

三、jquery页面跳转到新页面

在有些情况下，我们需要在新的页面中展示内容。使用target="_blank"属性来打开新的页面。下面是代码示例： 代码示例：

$(document).ready(function(){
    $("#btn").click(function(){
        window.open('http://www.example.com', '_blank');
    });
});

上面的代码中，当按钮id等于"btn"的元素被点击时，通过window.open()方法来打开新页面并跳转到目标页面。

四、jquery页面跳转传递参数

有时候我们需要在跳转页面时传递参数，使用URL传参的方式来实现。传递的参数可以是字符串、数字等类型。 代码示例：

$(document).ready(function(){
    $("#btn").click(function(){
        var name = "张三";
        var age = "18";
        window.location.href= "http://www.example.com?name=" + name + "&age=" + age;
    });
});

上面的代码中，当按钮id等于"btn"的元素被点击时，将name和age两个参数通过URL传参的方式跳转到目标页面。

五、html页面跳转

除了通过jQuery实现跳转，HTML中也可以使用<a>标签进行跳转。 代码示例：

<a href="http://www.example.com" target="_blank">跳转到example网站</a>

六、jquery页面跳转传参

当需要在jQuery中传递参数时，可以使用ajax()方法或load()方法来实现。 代码示例：

// ajax传参
$.ajax({
    type: "POST",
    url: "example.php",
    data: { name: "张三", age: "18" }
});
// load传参
$(document).ready(function(){
    $("#div1").load("example.php", { name: "张三", age: "18" });
});

上面的代码中，在data参数中存储了传递的参数，可以在接收页面中通过$_POST来获取参数。

七、jquery跳转html页面

有时候需要跳转到同一个网站的其他页面，这时候我们可以直接使用网站的相对路径来实现跳转。 代码示例：

$(document).ready(function(){
    $("#btn").click(function(){
        window.location.href= "example.html";
    });
});

上面的代码中，当按钮id等于"btn"的元素被点击时，直接跳转到网站根目录下的example.html页面。

八、jquery页面跳转到另一个html页面

在同一个网站下，有时候我们需要跳转到其他目录下的页面，此时我们可以使用相对路径来实现跳转。 代码示例：

$(document).ready(function(){
    $("#btn").click(function(){
        window.location.href= "about/example.html";
    });
});

上面的代码中，当按钮id等于"btn"的元素被点击时，跳转到网站根目录下的about目录下的example.html页面。

九、jquery跳转到指定页面

如果在目标页面的位置有锚点的话，可以使用指定锚点的方式来实现页面跳转。 代码示例：

$(document).ready(function(){
    $("#btn").click(function(){
        window.location.href= "http://www.example.com/#anchor";
    });
});

上面的代码中，当按钮id等于"btn"的元素被点击时，跳转到http://www.example.com网站的#anchor锚点位置。

十、jquery实现登录跳转页面

在登录跳转页面时，可以将登录账号和密码传递给后台，验证登录信息是否正确；通过判断验证结果来进行页面跳转。 代码示例：

$(document).ready(function(){
    $("#btnSubmit").click(function(){
        var username = $("#username").val();
        var password = $("#password").val();
        $.ajax({
            type: "POST",
            url: "example.php",
            data: { username: username, password: password },
            success: function(result){
                if(result == "true"){
                    window.location.href= "http://www.example.com/welcome.html";
                }else{
                    alert("登录失败");
                }
            }
        });
    });
});

上面的代码中，当登录按钮id等于"btnSubmit"的元素被点击时，将登录账号和密码通过ajax传递给example.php文件进行验证，验证成功跳转到http://www.example.com/welcome.html页面。

推荐文章