SSM框架实现Ajax用户注册校验证

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="重置"/>&nbsp;
          <input type="submit" value="注册"/>&nbsp;
          <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>

猜你喜欢

转载自blog.csdn.net/zhang1409399037/article/details/88361977