Local refresh of the login is on a page to have a login box, log in to the background to the asynchronous processing, processing completed will be displayed on the front end of the login user information, the most common example is the login Youku when we can see the URL login has not changed (in fact, Youku is not the way to local refresh, It is obvious that the entire page is refreshed, so Youku's implementation is not a partial refresh, but no example is found at a time. Recently intends to do a blog site project, Login here want to provide users with a more good experience, think of the use of Ajax to achieve partial refresh, but also think of the second login will need to determine the time to log on after the login needs to be determined directly to display the user information instead of the login box similar to the following three images of the effect.
This is the first picture, which shows the login box:
This is the second picture, showing the user information after login
The third picture, log on to the website again, display the information directly, not show the login box
This requires an AJAX embedded in the AJAX, the background code is written in Java, the direct use of the Spring MVC framework, the first need an AJAX to partially refresh a URL, but this URL to the controller, the controller needs to determine whether or not to pass, here I used the session.
Here is the HTML code:
1 <HTML>2 <Head>3 <title>Testindex</title>4 </Head>5 <Body>6 <H1>Hello</H1>7 <DivID= "MSG"></Div>8 </Body>9 <Scripttype= "Text/javascript"src= "Http://libs.baidu.com/jquery/2.0.3/jquery.min.js"></Script>Ten <Scripttype= "Text/javascript"> One $ (document). Ready (function(){ A $("#msg"). Load ("Login"); - }) - </Script> the </HTML>
The login address here is not a JSP, but a requestmapping in the controller.
The Java code is as follows:
1 @Controller2 Public classMaincontroller {3 Log logger;4 5@RequestMapping (value= "/index")6 PublicString Toindex () {7 return"Thefirstindex";8 }9 Ten@RequestMapping (value= "/login") One PublicString Login (HttpSession session) { A if(Session.getattribute ("username") = =NULL)return"Index"; - Else return"Success"; - } the -@RequestMapping (value= "/success") - PublicString tosuccess (@RequestParam ("username") String username, -@RequestParam ("Password") String Password, + HttpSession session) { -System.out.println ("success!\n" +username); +Session.setattribute ("username", username); A return"Success"; at } -}
We can see that when the session is empty to the index page (that is, the login page here), if the decision is not empty, jump to the Success page directly displays the page information after the login.
Success
1 < H1 > Ok! </ H1 > 2 Username Is:${username}Then the index
1 <DivID= "MSG">2Username<inputtype= "text"name= "username"ID= "username"/>3Password<inputtype= "Password"name= "Password"ID= "Password">4 <inputtype= "button"value= "Login"ID= "Btnsub">5 </Div>6 7 <Scripttype= "Text/javascript">8 $ (document). Ready (function(){9 $("#btnsub"). Click (function(){Ten Checklogin (); One }); A }); - - functionChecklogin () { the $.ajax ({ - Type:"Post", - URL:"Success", - Data:"username="+$("#username"). Val (). toString ()+"&password="+$("#password"). Val (). toString (), + Success:function(data) { - $("#msg"). HTML (data); + } A }) at } - </Script>
This is done again using AJAX to display the local refresh of the login information after logging in, and then writes the session to the success corresponding method for later use.
This is the beginning of the effect. That is, locally flushed logins.
How to implement the local refresh login page
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
