实现用户注册时提示用户该用户名是否已经被使用:
前台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> <span>男:</span><input
type="radio" name="sex" value="男" title="男" checked>
<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;
}
}
运行结果: