虽然作为一名后端开发人员,但ajax是火的不行,特别是在json封装前后台交互,简直是一利器,极大的缩短了后端开发者在前端页面一大堆标签和表单中耗费的时间,但悲剧的是,博主大三在实验室开发中,人员水平层次不齐,负责前端开发的女生连简单的jquery都写不好,所以我在实际项目中还是用的传统的标签技术,但一时手痒写了段利用ajax检验账号唯一性的代码。
首先前端页面
<script type="text/javascript">
var vResult = false;
//校验帐号唯一
function doVerify(){
//1、获取帐号
var account = $("#account").val();
if(account != ""){
//2、校验
$.ajax({
url:"${basePath}user_verifyAccount.action",
data: {"user.account": account},
type: "post",
async: false,//非异步
success: function(msg){
if("true" != msg){
//帐号已经存在
alert("帐号已经存在。请使用其它帐号!");
//定焦
$("#account").focus();
vResult = false;
} else {
vResult = true;
}
}
});
}
}
//提交表单
function doSubmit(){
var name = $("#name");
if(name.val() == ""){
alert("用户名不能为空!");
name.focus();
return false;
}
var password = $("#password");
if(password.val() == ""){
alert("密码不能为空!");
password.focus();
return false;
}
//帐号校验
doVerify();
if(vResult){
//提交表单
document.forms[0].submit();
}
}
</script>
采用非异步的方式,大致框架是这样,先定义一个变量初始化为false,在向后台传递账号,后台进行判断,后端代码如下
public void verifyAccount() throws IOException{
//1.获取账号
if(user !=null && org.apache.commons.lang.xwork.StringUtils.isNotBlank(user.getAccount())){
//2、根据帐号到数据库中校验是否存在该帐号对应的用户
List<User> list = userService.findUserByAccountAndId(user.getId(), user.getAccount());
String strResult = "true";
if(list != null && list.size() > 0){
//说明该帐号已经存在
strResult = "false";
}
//输出
HttpServletResponse response = ServletActionContext.getResponse();
response.setContentType("text/html");
ServletOutputStream outputStream = response.getOutputStream();
outputStream.write(strResult.getBytes());
outputStream.close();
}
}
若判断不唯一,传递false,唯一则为true,前端收到后,根据信息弹出相应的提示信息