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

局部刷新的登录就是在一个页面上有一个登录框,登录之后交给后台异步处理,处理完成之后会在前端显示出来登录的用户信息,最常见的例子就是登陆优酷的时候我们可以看到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>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zgyyfy.html