Ajax校验用户名

Posted 2021-04-15 eclipse编程

我们在做登录的时候经常会用到 Ajax 对用户名进行校验。异步校验可以减少页面的跳转，改善用户体验，

01

前端

 <script>      $(function(){     $("#username").blur(function(){ var username=$(this).val(); $.get({ url : "${path}/employee/checkName?username="+username, success:function(data){ var span = $("#s_username"); if(data.userExsit){ //用户名存在 span.css("color","green"); span.html(data.msg); }else{ //用户名不存在 span.css("color","red"); span.html(data.msg); } }          });          });  }); </script>  <form action="employee/login" method="post"> <input type="text" id="username" name="username" placeholder="请输入账号" ><span id="s_username"></span></div>       <input type="password" id="password" name="password"  maxlength="6"  placeholder="请输入密码"></div <input type="button" onclick="login()" value="登录"> </form> 

02

后台

  //controller @RequestMapping("/checkName") @ResponseBody public Object checkName(@RequestParam("username") String username) throws Exception{ Map<String,Object> map = new HashMap<String,Object>(); Boolean isExist=empService.checkName(username); if(isExist) { map.put("userExsit",true); map.put("msg","用户名正确!");  }else { map.put("userExsit",false); map.put("msg","用户名不存在!"); } return map; }   // Service Boolean checkName(String username);   // ServiceImpl @Override public Boolean checkName(String username) { // TODO Auto-generated method stub return employeeMapper.checkName(username); }  //mapper接口 Boolean checkName(String username);   //mapper.xml sql语句  <select id="checkName" parameterType="java.lang.String" resultType="java.lang.Boolean"> select count(*) from employee where username=#{username} and deleteFlag=0 </select>

03

效果

/ END /

作者简介：一颗雷布斯，坚持学习的程序猿一枚，不爱穿格子衫，发量超级多，喜欢解决各种bug。