局部刷新登录页面的实现方法

局部刷新的登录就是在一个页面上有一个登录框，登录之后交给后台异步处理，处理完成之后会在前端显示出来登录的用户信息，最常见的例子就是登陆优酷的时候我们可以看到URL登录之后没有变化（事实上，优酷用的方式不是局部刷新的方式，很明显可以看到整个页面刷新了，所以优酷的实现方式就是不是局部刷新，但是一时间没有找到例子）。最近打算做一个博客的网站的项目，登录这里想要提供给用户提供一个更加良好的体验，就想到了利用ajax实现局部刷新，但是又想到了第二次登录的时候会需要判断登录过之后需要直接显示用户信息而不是登录框类似于以下三张图的效果。

这是第一张图，显示登录框：

这个是第二张图，显示登录后的用户信息

第三张图，再次登录网站，直接显示信息，不在显示登陆框

这就需要在ajax中嵌套一个ajax，这个后台代码是使用java写的，直接用了spring mvc框架，首先需要一个ajax来局部刷新一个url，但是这个url到控制器，控制器需要判断是否等路过，这里我使用了session。

下面是html代码：

 1 <html>
 2 <head>
 3     <title>TestIndex</title>
 4 </head>
 5 <body>
 6 <h1>Hello</h1>
 7 <div id="msg"></div>
 8 </body>
 9 <script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.3/jquery.min.js"></script>
10 <script type="text/javascript">
11     $(document).ready(function(){
12         $("#msg").load("login");
13     })
14 </script>
15 </html>

这里的login地址不是某个jsp，而是controller里的RequestMapping

java代码如下：

 1 @Controller
 2 public class MainController {
 3     Log logger;
 4 
 5     @RequestMapping(value="/index")
 6     public String toindex(){
 7         return "TheFirstIndex";
 8     }
 9 
10     @RequestMapping(value="/login")
11     public String Login(HttpSession session){
12         if(session.getAttribute("username")==null)  return "index";
13         else    return "success";
14     }
15 
16     @RequestMapping(value="/success")
17     public String toSuccess(@RequestParam("username") String username,
18                           @RequestParam("password") String password,
19                           HttpSession session) {
20         System.out.println("Success!\n" + username);
21         session.setAttribute("username", username);
22         return "success";
23     }
24 }

我们可以看出来当session为空的时候到index页面（就是这里的登录页面），如果判断不为空的时候就跳转到success页面直接显示登录之后的页面信息。

success

1 <h1>OK!</h1>
2 username is:${username}

然后是index

 1 <div id="msg">
 2     username:<input type="text" name="username" id="username"/>
 3     password:<input type="password" name="password" id="password">
 4     <input type="button" value="Login" id="btnsub">
 5 </div>
 6 
 7 <script type="text/javascript">
 8     $(document).ready(function(){
 9         $("#btnsub").click(function(){
10             checklogin();
11         });
12     });
13 
14     function checklogin(){
15         $.ajax({
16             type:"post",
17             url:"success",
18             data:"username="+$("#username").val().toString()+"&password="+$("#password").val().toString(),
19             success:function(data){
20                 $("#msg").html(data);
21             }
22         })
23     }
24 </script>

这里再次使用ajax来做登录之后显示登录信息的局部刷新，然后在success对应的方法中写入session以便之后使用。

这就做成了开始的效果。也就是局部刷新的登录。

 

posted @ 2016-02-01 21:47  小马甲奶糖  阅读(3238)  评论(0)  编辑  收藏  举报