1、先将jquery-1.7.2.min.js放到WEB-INF目录下
2、spring-web.xml配置
<mvc:resources location="/WEB-INF/js/" mapping="/js/**"/>
<!-- FastJson注入 。ajax验证要用-->
<mvc:annotation-driven>
<mvc:message-converters register-defaults="true">
<!-- 避免IE执行AJAX时,返回JSON出现下载文件 -->
<!-- FastJson -->
<bean id="fastJsonHttpMessageConverter"
class="com.alibaba.fastjson.support.spring.FastJsonHttpMessageConverter">
<property name="supportedMediaTypes">
<list>
<!-- 这里顺序不能反,一定先写text/html,不然ie下出现下载提示 -->
<value>text/html;charset=UTF-8</value>
<value>application/json;charset=UTF-8</value>
</list>
</property>
</bean>
</mvc:message-converters>
</mvc:annotation-driven>
3、控制层
//查询注册时要用到的emp表中的ename存在一个list中,供前台参数对比,如已有数据,则提示已存在
@RequestMapping("/fastJSON")
@ResponseBody
public Map fastJSON(Emp emp){
System.out.println("前台Ajax传递过来的参数: "+emp.getEname());
//selename这个方法是取emp表中的ename字段的所有值存在一个list中
List<Emp> selename=service.selename(emp.getEname());
Map map = new HashMap();
map.put("selename",selename);
if (selename.size()>=1){
map.put("msg","已存在该用户");
}
return map;
}
jsp前台页面
<head>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.7.2.min.js"></script>
</head>
<body>
<form action="${pageContext.request.contextPath}/emp/addemp" method="post">
<table align="center" border="1" bgcolor="white">
<tr align="center"><td colspan="2" >注册</td></tr>
<tr><td>姓名:</td><td><input type="text" name="ename" id="ename"/></td></tr>
<tr><td>年龄:</td><td><input type="text" name="age"/></td></tr>
<tr align="center"><td colspan="2">
<input type="reset" value="重置"/>
<input type="submit" value="注册"/>
<input type="button" value="返回" onclick="history.go(-1)" />
</td></tr>
</table>
</form>
</body>
<script>
$("#ename").blur(function(){
var ename=$("#ename").val();
$.post("${pageContext.request.contextPath}/emp/fastJSON",{"ename":ename}, function (data) {//fastJSON是控制层的方法
if(data.msg!=null){
alert(data.msg);
}else{
alert("可以继续添加");
}
},"json")
})
</script>