引入niceValidator看这篇博客入门

实现效果：

为了演示简单 后台将已存在的用户名 固定设置为jerry
使用表单校验插件niceValidator异步校验用户名是否存在_html

参考niceValidator官方文档

JSON解析器： (Json和ajax相关知识看这篇)
常见的解析器：Jsonlib，Gson，fastjson，jackson

jackson解析器jar包下载
链接：https://pan.baidu.com/s/1ClAjP3cM4oQ7-l8D1ZcM-Q
提取码：9yo7

代码示例：

前台：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <!--引入插件相关文件-->
    <link href="./validator/jquery.validator.css" rel="stylesheet">
    <script src="./validator/jquery-3.3.1.min.js"></script>
    <script src="./validator/jquery.validator.min.js"></script>
    <!--中文国际化文件-->
    <script src="./validator/local/zh-CN.js"></script>
</head>
<body>

<form data-validator-option="{theme:'yellow_right_effect',stopOnError:true}">
    <input type="text" id="username" name="username" data-rule="用户名:required;remote[registerServlet]" placeholder="请输入用户名">
    <span id="s_username"></span>
    <br>
    <input type="password" name="password" placeholder="请输入密码"><br>
    <input type="submit" value="注册"><br>
</form>
</body>
</html>

后台：

package cn.kinggm520.web;

import com.fasterxml.jackson.databind.ObjectMapper;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;

/**
 * 作者: kinggm Email:731586355@qq.com
 * 时间:  2020-03-04 22:26
 */
@WebServlet("/registerServlet")
public class RegisterServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//解决response数据乱码
        response.setContentType("application/json;charset=utf-8");   //设置返回json格式
        //        获取用户名
        String username = request.getParameter("username");
//        定义返回数据
        Map<String, String> map = new HashMap<>();

//        判断用户名是否存在
//        这里设置已存在的用户名为jerry
        if ("jerry".equals(username)) {
//            用户名已存在
            map.put("error", "用户名已存在，请换个用户名");

            ObjectMapper objectMapper = new ObjectMapper();
//            Map转Json输出到页面 方式一
//            String string = objectMapper.writeValueAsString(map);
//            response.getWriter().write(string);

            //            Map转Json输出到页面 方式二
            objectMapper.writeValue(response.getWriter(),map);

        } else {
            map.put("ok", "用户名可用");
            ObjectMapper objectMapper = new ObjectMapper();
            objectMapper.writeValue(response.getWriter(),map);
        }
    }
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }
}