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. 因浏览器的原因,存在中文乱码的问题,处理方式详见我的另一篇文章:

7. 参考文章: