看到一個想收藏的的AJAX小列子

用戶登錄的驗證可以使用 form 表單提交，也可以使用 ajax 技術非同步提交。

AJAX 即 Asynchronous Javascript And XML（非同步 JavaScript 和 XML），是一種用於創建快速動態網頁的技術。
通過在後臺與伺服器進行少量數據交換，AJAX 可以使網頁實現非同步更新。

這意味著可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新。
傳統的網頁（不使用 AJAX）如果需要更新內容，必需重載整個網頁面。

jQuery ajax() 方法法是 jQuery 底層 AJAX 實現。

ajax() 方法有幾個重要參數：

  $.ajax({
        url: "detail.html",  //發送請求的地址，String類型的參數
        data:{id:"id"},      //發送到伺服器的數據，Object或String類型的參數，如果已經不是字元串，將自動轉換為字元串格式。
        type: "POST",        //請求方式，預設為GET，String類型的參數
        dataType:'json',     //預期伺服器返回的數據類型，String類型的參數；可用類型有（xml，html，json，jsonp，text）
        timeout:1000,        //請求超時時間，毫秒
        async: true,         // 預設為true，所有請求均為非同步請求，Boolean類型的參數
        beforeSend：function(XMLHttpRequest){  //發送請求前調用的函數
        
        },
        complete：function(XMLHttpRequest, textStatus){  //請求完成後調用的回調函數（請求成功或失敗時均調用）
        
        },
        
        success:function(){  //請求成功後調用的回調函數
        
        },
        error:function(){  //請求失敗時被調用的函數
        
        }
  });

示例：

驗證用戶登錄前臺代碼

$("#loginBtn").click(function(){
    var user = new Object();
    user.loginCode = $.trim($("#loginCode").val());
    user.password = $.trim($("#password").val());
    
    //前臺的非空驗證
    if(user.loginCode == "" || user.loginCode == null){
        $("#loginCode").focus;
        $("#formtip").css("color","red");
        $("#formtip").html("對不起，登錄賬號不能為空。");
    }else if(user.password == "" || user.password == null){
        $("#password").focus;
        $("#formtip").css("color","red");
        $("#formtip").html("對不起，登錄密碼不能為空。");
    }else{
        $("#formtip").html("");
        //如果賬號和密碼都不為空，就進行 ajax 非同步提交
        $.ajax({
            type:'POST',  //提交方法是POST
            url:'/login.html', //請求的路徑
            data:{user:JSON.stringify(user)}, //以JSON字元串形式把 user 傳到後臺
            dataType:'html', //後臺返回的數據類型是html文本
            timeout:1000,  //請求超時時間，毫秒
            error:function(){  //請求失敗的回調方法
                $("#formtip").css("color","red");
                $("#formtip").html("登錄失敗！請重試。");
            },
            success:function(result){   //請求成功的回調方法
                if(result != "" && result == "success"){
                //若登錄成功，跳轉到"/main.html"
                    window.location.href='/main.html';
                }else if(result == "failed"){
                    $("#formtip").css("color","red");
                    $("#formtip").html("登錄失敗！請重試。");
                    $("#loginCode").val('');
                    $("#password").val('');
                }else if(result == "nologincode"){
                    $("#formtip").css("color","red");
                    $("#formtip").html("登錄賬號不存在！請重試。");
                }else if(result == "pwderror"){
                    $("#formtip").css("color","red");
                    $("#formtip").html("登錄密碼錯誤！請重試。");
                }else if("nodata" == result){
                    $("#formtip").css("color","red");
                    $("#formtip").html("對不起，沒有任何數據需要處理！請重試。");
                }
            }
        });
    }
});

驗證用戶登錄後臺代碼

    /*@responseBody註解的作用是將 controller 的方法返回的對象通過適當的轉換器轉換為指定的格式之後，寫入到 response 對象的 body 區，通常用來返回 JSON 數據或者是 XML 數據，需要註意的是，在使用此註解之後不會再走視圖處理器，而是直接將數據寫入到輸入流中，他的效果等同於通過response對象輸出指定格式的數據。*/
    @RequestMapping("/login.html")
    @ResponseBody
    public Object login(HttpSession session,@RequestParam String user){
    
    //後臺非空驗證
        if(user == null || "".equals(user)){
            return "nodata";
        }else{
        
        //user 轉換成 json 對象，再轉成 java 對象
            JSONObject userObject = JSONObject.fromObject(user);
            User userObj= (User)userObject.toBean(userObject, User.class);
            
            try {
                if(userService.loginCodeIsExit(userObj) == 0){//不存在這個登錄賬號
                    return "nologincode";
                }else{
                    User _user = userService.getLoginUser(userObj);
                    
                    //登錄成功
                    if(null != _user){
                        //當前用戶存到session中
                        session.setAttribute(Constants.SESSION_USER, _user);
                        
                        //更新當前用戶登錄的lastLoginTime
                        User updateLoginTimeUser = new User();
                        updateLoginTimeUser.setId(_user.getId());
                        updateLoginTimeUser.setLastLoginTime(new Date());
                        userService.modifyUser(updateLoginTimeUser);
                        updateLoginTimeUser = null;
                        return "success";
                    }else{
                      //密碼錯誤
                        return "pwderror";
                    }
                }
            } catch (Exception e) {
                return "failed";
            }
        }
    }

關於 ajax() 方法更多詳細參數及使用方法參見 w3cschool手冊