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检测先后密码是否一致