js登陆案例04-实现登陆后页面跳转并传递输入内容到新页面代码

我们在登陆一个网站的时候,经常是输入用户名和密码后会跳转到一个新的页面,并且这个页面会显示我们的用户名,这个现象本质上是通过数据库来实现的,但是用js也可以实现这样的效果,虽然没有太大的意义,不过对于训练js在不同页面之间传值是很有意义的。

其中,登陆页面login.html的代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>  
<head>
          <script >
//这里是把js写在了head里,一般是写在body里;
            function login(){ //建立函数,开启新的窗口,传参数过去;
        var a=document.getElementById("name").value; //获取输入框的值;
        alert(a);  //将输入框获取的值弹窗显示,检验是否获取;              
                var url="user.html?"+a; //将获取的值传递到新的页面user.html          
                window.open(url); //在另外新建窗口中打开上述地址或页面
            }  
          </script>  
</head>  
    <body>
    <input type="text" value="请输入" id="name">  
        <input type="button" value="登录" onclick="login()"> <!--按钮调用函数-->
    </body>  
</html>

上面代码中,user.html?的问号后面的内容就是要传递出去的值。接收该值的页面代码是:

1
2
3
4
5
6
7
8
9
10
11
12
<html>
   <body>  
        <p id="r" name="r"></p>  <!--写一个段,用来显示接收的数据-->  
    <script type="text/javascript">  
         var u=window.location.href;
//新建变量u接收login.html中链接url的值"user.html?"+a;
    var a=u.indexOf("?"); //新建变量a,查找"?"在u中的索引值(位置);
        var b=u.substring(a+1); //新建变量b,获取"?"在u中后面的字符串;
    document.getElementById("r").innerHTML= "欢迎你登陆!用户"+b; //将字符串显示在页面
    </script>
</body>
</html>

上述代码中除了新建变量u,a,b有点新知识外,其他都很简单。

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: