这几天写代码的时候遇到了不少问题,比如在ajax发送请求之后服务端发回的数据要和js中定义的字符串进行比较但是明明写的一样却总是比较出错
先放js中的代码
function check_name() {
var str = $('#code').val();
var msg = $('#msg_n');
if(!/\w{3,12}/.test(str)) {
msg.html('用户名不符合要求');
name = false;
} else {
$.ajax({
url:'checkName.do',
type:'post',
data:{'name':str},
dataType:'text',
success:function (data) {
if(data == 'pass') {
changeClass(msg, 'text-danger', 'text-success');
name = true;
submit_regi();
} else {
changeClass(msg, 'text-success', 'text-danger');
name = false;
}
msg.html(data);
},
error:function() {
console.log('error');
}
});
}
}
页面中的代码
<div class="form-group">
<label for="code">用户名</label>
<input type="text" class="form-control" id="code" placeholder="3-12位数字,下划线,字母的组合" onBlur="check_name();" required name="name">
<p id="msg_n" class="text-danger"></p>
</div>
之后Controller层是这样处理的
@RequestMapping("checkName.do")
public void checkName(HttpServletRequest request,
HttpServletResponse response) {
response.setCharacterEncoding("utf-8");
PrintWriter out;
try {
out = response.getWriter();
if(basicService.findByName(request.getParameter("name"))) {
out.println("用户名已存在");
} else {
out.println("pass");
}
} catch (IOException e) {
LOG.error("IO异常,请检查网络");
request.getRequestDispatcher("error.jsp");
e.printStackTrace();
}
}
这样前后端的代码就都完成了,dao层的代码和service层的代码已经通过测试,不会出现问题
数据库中已经存放了一条记录,名字是biyao,
当我向页面中输入zhangxiaofan之后神奇的事情发生了,虽然在下面显示了pass,但是字体颜色是红色的(text-danger),说明没有进入到if(data == ‘pass’)的那个分支。但是实际上,服务器checkName.do返回的字符串就是pass,这就很奇怪了。
然而
呵呵
在我测试了data的长度之后豁然开朗
果然不出所料
data的长度是5!!!!!!!
而且当我console.log('data[5]' + data[5])
的时候,浏览器的控制台输出的结果是这样的
data[5]:undefined
所以把原来js中的分支改成这样就没有问题了
if(data.substr(0,4) == 'pass') {
changeClass(msg, 'text-danger', 'text-success');
name = true;
submit_regi();
} else {
changeClass(msg, 'text-success', 'text-danger');
name = false;
}
至于为什么发送了pass这个字符串接收的时候返回的字符串长度是5,这其实是由于println()方法造成的,因为println方法会在输入参数的最后加上换行符
所以其实不用改动js代码,直接将println()方法改成print()方法就好了
ok~