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. 因瀏覽器的原因,存在中文亂碼的問題,處理方式詳見我的另一篇文章:

7. 參考文章: