使用ssm框架+ajax验证用户名唯一性

ajax用法大致分为两类：原生用法和基于jQuery的ajax应用，大多数运用后者。

简单介绍一下ajax实现验证用户名唯一性：

添加依赖的jar包：

<dependency>
    <groupId>org.codehaus.jackson</groupId>
    <artifactId>jackson-mapper-asl</artifactId>
    <version>1.9.13</version>
</dependency>
<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>fastjson</artifactId>
    <version>4.2.5</version>
</dependency>

<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-annotations</artifactId>
    <version>2.5.0</version>
</dependency>

<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-core</artifactId>
    <version>2.5.0</version>
</dependency>
<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-databind</artifactId>
    <version>2.5.0</version>
</dependency>
<dependency>
    <groupId>org.codehaus.jackson</groupId>
    <artifactId>jackson-mapper-asl</artifactId>
    <version>1.6.4</version>
</dependency>

使用jQuery切记不要忘记引入jQuery插件

<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.2.1.js"></script>

下面开始实现：

1.register.jsp添加个输入框用来输入用户名，<span>标签用来提示。

<form action="register.action"
      method="post" οnsubmit="return validate();">
    <div class="login_1">
        <div class="span1">
            <label class="tn-form-lable">用户名：</label>
            <input class="tn-textbox" type="text" name="userName" id="username"
                 οnblur="ajaxValidate()"  >
            <span id="remind" color="red"></span>
        </div></form>

2.js的实现：

function ajaxValidate() {
    var username=$("#username").val();
    $.ajax({
        type:"POST",
        url:"${pageContext.request.contextPath}/register/findUser.action",//提交地址
        data:"username="+username,//提交数据
        dataType:"json",//返回json格式
        //contentType:"application/json;charset=utf-8",
        success:function(data){
            if ("no" == data.msg) {//后端传来的msg的值是no,不能注册。反之。
                $("#remind").html("<font color='red'>抱歉，该用户已被注册，请更换！</font>");
            }if("yes" == data.msg){
                $("#remind").html("")//如果没有被注册，将提示语清空。
                 }
        }
    });
}

3.controller层：注意一定要加上

 @ResponseBody注解！

 @ResponseBody
    @RequestMapping(value="/register/findUser.action", method=RequestMethod.POST)
    public Message ajaxValidate(HttpServletRequest request) {
        //String username = JSONObject.parseObject(json).getString("username");
        String username = request.getParameter("username");
        UserMapper userMapper = (UserMapper) applicationContext.getBean("userMapper");
         User user = userMapper.findUser(username);//从数据库查找前端出来的用户
        if(user==null){//user为空，说明没有找到该用户，可以注册。反之。
            Message msg = new Message("yes");
            return msg;//然后返回给前端执行success方法。
        }else{
            Message msg = new Message("no");
            return msg;
        } 
    }

4.由于封装了msg,需要一个实体类：Message

public class Message {
   private String msg;
   private User user;
   public Message() {
      super();
   }
   public Message(User user) {
      super();
      this.user = user;
   }
   public Message(String msg) {
      super();
      this.msg = msg;
   }
   public Message(String msg, User user) {
      super();
      this.msg = msg;
      this.user = user;
   }
   public String getMsg() {
      return msg;
   }
   public void setMsg(String msg) {
      this.msg = msg;
   }
   public User getUser() {
      return user;
   }
   public void setUser(User user) {
      this.user = user;
   }
}

就这么简单一写吧，以上也有许多需要优化的地方：比如说，可以直接返回前端一个User对象，在前端判断user是否为空，进而做出判断......

提示效果与不提示效果：