HTML页面跳转及传递参数

这里使用ajax实现页面跳转并传参;

实例:用户在登录界面输入账号密码后跳转到用户界面并且传递账号姓名;

1、页面跳转:

登录界面ajax跳转代码:

$.ajax({
            url:"/webapi/login/user",
            data:{
                username:name,
                password:password
            }

        }).done(function (rs) {

            if (rs>=0){
                //成功
                window.location.href="/student/list";
            }else{
                alert("出错了,您的用户名和密码有误");
            }
        });

如果账号密码输入正确,网页就会跳转到 “/student/list" 页面:

 window.location.href="/student/list";

2、传递参数

将跳转页面代码改为如下形式:

window.location.href="/student/list?xm="+$("#username").val();

这样就在页面跳转到 “/student/list" 页面时,将用户登录的姓名也传递到该页面;

“/student/list" 页面接收传递信息的代码:

定义一个id选择子:

  • js接收代码:

    var url = decodeURI(location.search); //获取url中"?"符后的字串 ?vm_id=2
    var dd;
    if(url.indexOf("?") != -1) {undefined
        str = url.substr(1);
        strs = str.split("=");
        dd = strs[1];
    }
    $("#hyn").html("欢迎您! " +dd);

    效果图展示:

    登录 (姓名为abc):

    HTML页面跳转及传递参数_第1张图片

    跳转页面效果:

     

     

    你可能感兴趣的:(前端,html,ajax,javascript,前端)