简单AJAX异步校验用户名是否存在

一、导入需要依赖：阿里的fastjson

<dependency>
      <groupId>com.alibaba</groupId>
      <artifactId>fastjson</artifactId>
      <version>1.2.73</version>
    </dependency>

二、MVC中的配置

  <mvc:annotation-driven>
        <mvc:message-converters register-defaults="true">
            <bean class="com.alibaba.fastjson.support.spring.FastJsonHttpMessageConverter">
                <property name="supportedMediaTypes" value="application/json"/>
            </bean>
        </mvc:message-converters>
    </mvc:annotation-driven>

三、前台页面代码及代码（这里前台用了bootstrap插件）

<form>
    <div id="bigbox">
        <div class="form-group">
            <label >Username</label>
            <input type="text" class="form-control" id="userName" name="userName" placeholder="您的用户名"><span id="span"></span>
        </div>
        <div class="form-group">
            <label for="exampleInputPassword1">Password</label>
            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
    </div>
</form>

四、前台jq校验脚本编写

<script>
        //jq入口函数
        $(function () {
            //拿到用户名标签绑定离交事件
            $("#userName").blur(function () {
                //获取用户输入的val
              var username=  $("#userName").val();
              if(username==""){
                    alert("用户名不能为空！");
                    return;
              }
              //ajax异步校验
              $.get("${pageContext.request.contextPath}/findUserName.do",{"userName":username},function (data) {
                  //获取span标签
                  var span=$("#span");
                  //判断数据是否存在
                  if(data.userExsit){
                      span.html(data.msg).css("color","red");
                  }else{
                      span.html(data.msg).css("color","green");
                  }
              },"json");

            })
        })
    </script>

 

五、后台校验代码 controller层

  @RequestMapping(value = "/findUserName.do", method = {RequestMethod.GET, RequestMethod.POST})
    @ResponseBody
    public void method010(HttpServletRequest request, HttpServletResponse response) throws IOException {
        //异步校验用户名是否存在
        response.setContentType("text/html;charset=utf-8");
        String userName = request.getParameter("userName");
        String userByUserName = userService.findUserByUserName(userName);
        HashMap<String, Object> map = new HashMap<>();
        if (userName.equals(userByUserName)){
            map.put("userExsit", true);
            map.put("msg", "用户名已经注册,换个试试吧");
        }else{
            map.put("userExsit", false);
            map.put("msg", "用户名未注册");
        }
        String json = JSON.toJSONString(map);//将map转为json字符串
        response.getWriter().write(json);

    }

mybatis

<select id="findUserByUserName" resultType="String">
        SELECT t_user.`user_name`
        FROM t_user
        WHERE t_user.`user_name`=#{userName};
 </select>

dao接口

//查询用户名是否存在用于注册异步校验
String findUserByUserName(@Param("userName") String userName);

 六：效果