ajax在springMVC中的实例

实现用户注册时提示用户该用户名是否已经被使用：

前台jsp部分代码:
表单：

<form action="../../registerUser" method="post">

                    <li class="login-item"><span>用户名：</span> <input type="text"
                        id="userName" name="userName" placeholder="请输入" autocomplete="off"
                        class="login_input" required="required" onchange="checkIsExist()">
                        <div id="message"></div></li>

                    <li class="login-item"><span>密 码：</span> <input
                        type="password" name="password" placeholder="请输入"
                        autocomplete="off" class="login_input" required="required"></li>

                    <input type="password" name="password" style="display: none"
                        autocomplete="off">

                    <li class="login-item"><span>性 别：</span> &nbsp;&nbsp;&nbsp; <span>男：</span><input
                        type="radio" name="sex" value="男" title="男" checked>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span>女：</span><input
                        type="radio" name="sex" value="女" title="女"></li>

                    <li class="login-sub">
                        <button class="login-sub" type="submit">提交</button>
                        <button type="reset">重置</button>
                    </li>
                </form>

ajax:

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    function checkIsExist() {
        //var userName = document.getElementById("userName");
        var userName = $("#userName").val();
        $.ajax({
            type : 'post',
            url : '../../checkUserName',
            data : "userName=" + userName,
            //dataType:"json",
            //contentType : "application/x-www-form-urlencoded",
            //cache : false,
            success : function(data) {
                //data = data.replace("\"","").replace("\"","");
                if(data==0) {
                     $("#message").html("<font color='red'>该用户名已存在</font>");
                } else if(data==1) 
                {
                     $("#message").html("<font color='green'>该用户名不存在</font>");
                }
            }
        })
    }
</script>

后台controller:

/**
     * 用户ajax检验用户名是否已经存在
     * @param userName
     * @return
     */
    @RequestMapping(value = "/checkUserName",method = RequestMethod.POST)
    @ResponseBody
    public int checkUserName(String userName){
        //查询用户名是否重复
        //o即表示已经存在该用户名，不能注册，1表示该用户名不存在，可以注册
        List<Sys_user> list = userService.getUserByNameList(userName);
        if(list!=null && !list.isEmpty()){
            return 0;
        }else{
            return 1;
        }
    }

运行结果：