Ajax实现注册登录校验

1.在做项目的时候，或多或少都会用到ajax来实现注册登录的校验，例如，当你注册时，你输入一个用户名，就会提示你，用户名可用，或者，用户名已被注册，等等，就像下图这种。
在这里插入图片描述

接下来我们就实现一下这个简单的实例吧。

1.Controller的编写，这里为了方便，就伪造一个用户名密码。


    @RequestMapping("user/reg")
    @ResponseBody
    public String login(String name, String pwd){
        String msg = "";
       if(name != null){
           if("admin".equals(name)){
               msg = "ok";
           }else {
               msg = "username is error";
           }
       }
        if(pwd != null) {
            if ("123456".equals(pwd)) {
                msg = "ok";
            } else {
                msg = "your password is error";
            }
        }
        return  msg;
    }

注意别忘记@ResponseBody注解，返回的是字符串。

2.前端页面的编写，使用Ajax，我们导入Jquery


<%@ page isELIgnored="false"%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script type="text/javascript">
           function a1(){
                $.post({
                    url:'/user/reg',
                    data:{"name":$("#name").val()},
                    success: function(data){
                      if(data.toString()=="ok"){
                          $('#userInfo').css("color","green");
                      }
                        else{
                            $('#userInfo').css("color","red");
                        }
                        $('#userInfo').html(data);
                    }
                })
           }

           function a2(){
             $.post('user/reg',{"pwd":$("#pwd").val()},function (data){
                 if(data.toString()=="ok"){
                     $('#pwdInfo').css("color","green");
                 }
                 else{
                     $('#pwdInfo').css("color","red");
                 }
                 $('#pwdInfo').html(data);

             })
           }
        </script>

</head>
<body>
<p>
    用户名：
    <input type="text" id="name" onblur="a1()"/>
    <span id="userInfo"></span>

</p>
<p>
    密码：
    <input type="text" id="pwd" onblur="a2()"/>
    <span id="pwdInfo"></span>

</p>
</body>
</html>

这里主要就是js的编写，
url:’/user/reg’,
data:{“name”😒("#name").val()},
url是你Controller的请求路径，data就是用户名，成功之后，给标签赋值。
onblur（）是失去焦点而触发的事件。

我们来看一下效果吧：
在这里插入图片描述

在这里插入图片描述

但是我在这里遇到了一个问题，请求大佬支个招

就是中文乱码问题，我在web.xml中已经配置了过滤器。

<!-- 解决springmvc传递值乱码问题 -->
  <filter>
    <filter-name>encodingFilter</filter-name>
    <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
    <init-param>
      <param-name>encoding</param-name>
      <param-value>UTF-8</param-value>
    </init-param>
    <init-param>
      <param-name>forceEncoding</param-name>
      <param-value>true</param-value>
    </init-param>
  </filter>
  <filter-mapping>
    <filter-name>encodingFilter</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>