今天在使用jquery. Validator验证框架的过程中遇到了一个这个的问题:
我需要动态的去验证注册邮箱是否已经存在了,所以需要用到ajax请求来解决该问题。但在使用该验证框架的ajax异步请求时,因为我是通过json格式来传递数据的,后台也是返回json类型数据。Js代码如下:
$("#registerModal").validator({
rules:{
userName:{
required:true,
rangelength:[4,15]
},
password:{
required:true,
rangelength:[5,15]
},
passwordAgain:{
required:true,
equalTo:"#password"
},
email:{
required:true,
email:true
remote : {// ajax验证邮箱地址是否已存在
url : "login!emailIsUnique",
type : "post",
dataType : "json",
data : {
email : function() {
return $("#inputEmail").val();
}
},
dataFilter : function(data, type) {//接收返回数据
alert(data);
if (data.flag == "1101") {
return false;
} else {
return data;
}
}
}
}
}
});
但是在后台返回的函数里我通过“data.flag”却没能拿到我想要的值,也就是if一直没进入。并且data数据里面的flag是有值的等于1101,但是“data.对象”却变成了undefined了。
后台代码:
public String emailIsUnique(){
logger.info("验证邮箱!");
List<Userinfo> userList = userService.findAllUser();
for(int i=0;i<userList.size();i++){
if(email.equals(userList.get(i).getEmail())){
flag=PageStatus.EMAIL_IS_REPEAT;//1101
return "json";
}
}
return "json";
}
后面通过查找相关的资料并结合alert()对相关信息的调试,发现虽然该验证框架定义的数据类型(dataType=’json’)为json类型,但是其实仅仅只是一个json字符串。也就是说它返回来的值其实只是一个字符串。那么如何解决该问题呢?这里我提供两种不同的方法:
方法一:
改变后台代码,将if中的flag直接通过写的方式写到前台去;
public void emailIsUnique() throws IOException{
logger.info("验证邮箱!");
List<Userinfo> userList = userService.findAllUser();
for(int i=0;i<userList.size();i++){
if(email.equals(userList.get(i).getEmail())){
flag=PageStatus.EMAIL_IS_REPEAT;//1101
HttpServletResponse response = ServletActionContext.getResponse();
PrintWriter writer = response.getWriter();
writer.print(flag);
writer.flush();
writer.close();
}
}
}
这样直接将flag的值“1101”通过字符串的形式写出。
这种方式,主要是因为jquery验证框架数据接收对象“data”只接收字符串类型。此时data返回的值即为“1101”。但这种方式真心的感觉很费功夫。
方法二:后台代码不变,只需在前台代码js里面加入一点点代码。
java后台:
public String emailIsUnique(){
logger.info("验证邮箱!");
List<Userinfo> userList = userService.findAllUser();
for(int i=0;i<userList.size();i++){
if(email.equals(userList.get(i).getEmail())){
flag=PageStatus.EMAIL_IS_REPEAT;//1101
return "json";
}
}
return "json";
}
js代码修改:
dataFilter : function(data, type) {
alert(data);
var asas=jQuery.parseJSON(data);
alert(asas.flag);
if (asas.flag == "1101") {
return false;
} else {
return data;
}
}
只需要加入红色部分,即解决了该问题。这个方法是利用Jquery自带的方法,将字符串转换成json类型数据。因为我们可以加入alert(data)看一下data数据的组织形式便可以发现其实该数据也是已key-value的形式传递的。另外这种方式同样也适用于“data.对象.属性”例如:data.User.userName。个人认为这种方式比起方法一要好多了。