Ajax结合SpringMVC进行用户名异步校验

1. JSP代码:

<script>
        function checkName(){
            var name=document.getElementById("name").value;
            //判断是否输入用户名
            if(name.length !=0){
                //1.创建异步交互对象
                var xhr=createXmlHttp();
                //2.设置监听
                xhr.onreadystatechange=function(){
                    if(xhr.readyState==4){
                        if(xhr.status==200){
                            document.getElementById("span1").innerHTML=xhr.responseText;
                        }
                    }
                }
                //3.打开连接
                xhr.open("GET","${ctx}/smart/itemTopic/itemTopic/validate.ht?time="+new Date().getTime()+"&name="+name,true);
                //4.发送
                xhr.send(null);
            }else{
                document.getElementById("span1").innerHTML="";
            }
        }

        function createXmlHttp(){
            var xmlHttp;
            try{//Firefox,opera,Safari
                xmlHttp=new XMLHttpRequest();
            }
            catch(e){
                try{//Internet explorer
                    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
                }
                catch(e){
                    try{
                        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                    }
                    catch(e){}
                }
            }
            return xmlHttp;
        }
}

<!-- 事件触发 -->
<input type="text" id="name" name="name" value="${item.name}"  class="inputText" validate="{required:true,rangelength:[2,20] }" onblur="checkName();"/><span id="span1"></span>

2. Controller代码:

    @RequestMapping("validate")
    @Action(description="校验名称是否已经存在")
    public String validate(HttpServletRequest request, HttpServletResponse response) throws Exception
    {
        String name=RequestUtil.getSecureString(request,"name");
        Map<String, Object> params = new HashMap<String, Object>();
        params.put("name", name);
        List<ItemTopic> list = itemTopicService.getTopicList(params, null);
            //判断
            if(list != null && list.size()>0){
                //查询到该用户：用户名已经存在
                response.getWriter().println("<font color='red'>名称已经存在</font>");
            }
            else{
                //没查到该用户：用户名可以使用
                response.getWriter().println("<font color='green'>名称可以使用</font>");
            }
         return null;        
    }

3. Service代码:

    public List<ItemTopic> getTopicList(Map<String, Object> params,PageBean pageBean) {
        return dao.getTopicList(params,pageBean);
    }

4. Dao代码:

    public List<ItemTopic> getTopicList(Map<String, Object> params,PageBean pageBean) {
        return this.getBySqlKey("getTopicList", params,pageBean);
    }

5. mapper.xml代码:

    <select id="getTopicList" resultMap="ItemTopic">
        select *
        FROM zh_item_topic
        where topic_name = #{name}
    </select>

6. 因浏览器的原因,存在中文乱码的问题,处理方式详见我的另一篇文章:

XMLHttpRequest 传递中文 乱码

7. 参考文章:

使用AJAX完成用户名是否存在异步校验