基于ssm框架下实现用户名查重验证
使用ajax异步交互
function checkname(){
var f=false;
//javascript所有的变量都是以var定义的
//javascript的变量属于弱类型
//获取用户输入的用户名
var name = document.getElementById("username").value;
//去除字符串两端空格
name=name.trim();
//判断是否为空
if(name==""){
document.getElementById("username_span").innerHTML="用户名不能为空";
}else if(name.length<6||name.length>16){
document.getElementById("username_span").innerHTML="用户名的长度为6-16位";
}
else{
document.getElementById("username_span").innerHTML="";
//校验用户名是否存在
//使用ajax异步校验用户名
$.ajax({
url:"/bookshopping/checkName",
type:"post",
data:{"username":name},//json数据格式的用户名从jsp传递给controller
dataType:"json",
async:false,//让ajax执行代码顺序同步
success:function(data){
if(data.msg=="false"){
document.getElementById("username_span").innerHTML="用户名已存在";
}else{
document.getElementById("username_span").innerHTML="用户名可用";
f=true;
}
}
});
}
return f;
}
controller
@RequestMapping("checkName")
@ResponseBody//返回给jsp字符串格式
public String checkName(String username) {
//根据用户名查询是否存在该用户名
Users user=userService.findUserByName(username);
//当对象不为空,说明用户名存在
if(user!=null) {
return "{\"msg\":\"false\"}";
}
return "{\"msg\":\"true\"}";
}
前段jsp
<form action="reg.action" method="post" onsubmit="return check()" id="registform">
<input type="hidden" name="method" value="regist">
<!-- 我们当前是一个注册操作 -->
<table>
<tr>
<td>用户名:</td>
<td>
<input type="text" name="username" id="username" onblur="checkname()">
<span id="username_span"></span>
</td>
</tr>
</table>
</form>