局部刷新的登錄就是在一個頁面上有一個登錄框，登錄之后交給后台異步處理，處理完成之后會在前端顯示出來登錄的用戶信息，最常見的例子就是登陸優酷的時候我們可以看到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以便之后使用。
這就做成了開始的效果。也就是局部刷新的登錄。