Spring MVC+ajax進行信息驗證

本文是一個ajax結合Spring MVC使用的入門，首先咱們來了解一下什麼是Ajax

AJAX 不是新的編程語言，而是一種使用現有標準的新方法。AJAX 最大的優勢是在不從新加載整個頁面的狀況下，能夠與服務器交換數據並更新部分網頁內容。因此ajax對於提高用戶體驗十分重要

XMLHttpRequest 是 AJAX 的基礎。

主要的方法有兩種：

var xmlhttp=new XMLHttpRequest();
xmlhttp.open(method,url,async)
xmlhttp.send();

 　　open方法裏面的參數中，method表明請求的類型（GET/POST）, url 表明要要請求的資源的位置，async表明是否要啓動異步請求，這個值通常都填true，由於這樣更快，不會由於服務端的響應慢而致使程序掛起

　　send方法固然就是發起請求的動做啦

　　這裏須要注意：若是須要像 HTML 表單那樣 POST 數據，請使用 setRequestHeader() 來添加 HTTP 頭。而後在 send() 方法中規定你但願發送的數據：

xmlhttp.open("POST","url",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");   //這一條很是重要，也很是有用
xmlhttp.send("fname=Henry&lname=Ford");

 　　上面代碼中的第2行，指明瞭發送的數據類型，其實通常咱們用來指定發送的類型經常使用值是JSON類型，也就是"application/json"，爲何經常使用JSON類型呢？你想一想，當咱們要發送多個值的時候，若是一個一個參數的去組織，那將是多麼麻煩呀，並且服務端拿到數據後，還要咱們一個一個的將數據從request.parameter裏面拿出來，很是的浪費時間，因此，利用JSON，能夠將數據先寫成JSON格式，再傳到後端，後端會自動解析，自動將數據填入對應的POJO，很是方便，

可是要作到這些，咱們須要如下配置：

（1）設置content-type 爲 "application/json" ，目的是告訴服務端傳過來的是JSON

（2）用JSON.stringify將數據轉換成JSON字符串再傳送

（3）服務端Controller須要在方法的參數前用@requestBody,這樣服務端就會調用相應的解析器，將請求解析

　　到這裏咱們一個完整的請求就完成啦！看完了請求，接下來咱們再看響應，ajax接受響應的函數以下：

xmlhttp.onreadystatechange=function()   //自動調用
  {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
      xmlDoc=xmlhttp.responseXML；  //得到值
    }
  }

　　Ajax在接收到響應以後，會自動調用 onreadystatechange方法，而後經過responseXML獲取返回值，那麼咱們就會遇到一個問題：在Spring MVC中，返回值會寫到ModelAndView中，而後查找到視圖，將數據渲染到視圖中，不能達到咱們要的效果，即返回數據而不指定視圖，因此咱們要用到@responseBody

 　　聲明@requestBody後，返回值若是是字符串則直接將字符串寫到客戶端,假如是一個對象，此時會將對象轉化爲JSON串而後寫到客戶端。這裏須要注意的是，若是返回對象,按utf-8編碼。若是返回String，默認按iso8859-1編碼，頁面可能出現亂碼。所以在註解中咱們能夠手動修改編碼格式，例如@RequestMapping(value="/cat/query",produces="text/html;charset=utf-8")，前面是請求的路徑，後面是編碼格式。在客戶端，得到JSON字符串之後，能夠利用JSON.parse()將響應轉換爲json對象，方便使用

一個實例demo：

 表單以下：

<form role="form" action="userController/insert.do">
    <div class="form-group">
        <label for="exampleInputEmail1">用戶名</label><input name="username" type="text" class="form-control" id="exampleInputEmail1"
                                                          onblur="check(this)"/>
        <h5 style="color:red" id = "usernameInfo"></h4>
    </div>

    <div class="form-group">
        <label for="exampleInputPassword1">密碼</label><input name="password" type="password" class="form-control" id="exampleInputPassword1"
                                                            onblur="check(this)"/>
        <h5 style="color:red" id="passInfo"></h4>
    </div>
    <div class="form-group">
        <label for="exampleInputPassword1">確認密碼</label><input name="repassword" type="password" class="form-control" id="exampleInputPassword2"
                                                              onblur="check(this)"/>
        <h5 style="color:red" id="repassInfo"></label>
    </div>
    <button type="submit" class="btn btn-success btn-lg btn-block">提交</button>
</form>

 

 表單經過失去焦點的onblur觸發器觸發檢查的 js 代碼 check()

 1 var check = function(info){
 2     if (info.name=="username"){
 3         var username = document.getElementById("exampleInputEmail1").value.trim();
 4         if (username=="") {
 5             document.getElementById("usernameInfo").innerHTML = "用戶名不能爲空";
 6         }else{
 7             loadXMLDoc();  //執行Ajax檢查
 8         }
/////分割線////////////////////////////////分割線/////////////////////////////////////////分割線
 9     }else if (info.name=="password"){
10             var pass=document.getElementById("exampleInputPassword1").value.trim();
11             if (pass==""){
12                 document.getElementById("passInfo").innerHTML="密碼不能爲空";
13             }else{
14                 document.getElementById("passInfo").innerHTML="";
15             }
16     }else{
17         var value1=document.getElementById("exampleInputPassword2").value;
18         var value2=document.getElementById("exampleInputPassword1").value;
19         if (value1!=value2){
20             document.getElementById("repassInfo").innerHTML="先後密碼不一致";
21         }else{
22             document.getElementById("repassInfo").innerHTML="";
23         }
24     }
25 }

 

上面的代碼差很少相同，因此只用看分割線上的就差很少了，分割線上面的是先用本地JS檢測用戶輸入是否爲空，而後若不爲空，則執行Ajax代碼，檢查帳號是否已經被佔用，Ajax代碼以下：

 1 var loadXMLDoc=function() {
 2     var xmlhttp=new XMLHttpRequest();
 3     xmlhttp.onreadystatechange=function()
 4     {
 5         if (xmlhttp.readyState==4 && xmlhttp.status==200)
 6         {
 7            var text=xmlhttp.responseText;
 8            document.getElementById("usernameInfo").innerHTML=text;  //設置反饋信息
 9         }
10     }
11     var name =  document.getElementById("exampleInputEmail1").value;    //獲取用戶輸入
12     xmlhttp.open("GET","userController/checkInfo.do?username="+name,true);    //構造請求
13     xmlhttp.send();                                                     //發送
14 }

 

最後看看Controller的代碼：

 1     @RequestMapping(value="/checkInfo",produces={"text/html;charset=utf-8;"})    //設置編碼
 2     @ResponseBody                                                               //設置響應轉換爲JSON
 3     public String check(HttpServletRequest requst) {
 4         String username = requst.getParameter("username");
 5         System.out.println(username);
 6         Integer id = userService.check(username);       //檢查帳號是否已經存在
 7         if (id!=null) { 9             return "帳號已經存在";
10         }else {
11             return "";
12         }
13     }

成果展現：

利用js提醒密碼不能爲空

　　　　　　　　　　　　　　　　　　　　　　　　　　

 

 

利用ajax檢測帳號是否重複，以及利用JS檢測先後密碼是否一致