Ajax接收Java服务端发送的text数据(用户名检查)

前端之家收集整理的这篇文章主要介绍了Ajax接收Java服务端发送的text数据(用户名检查)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

这几天写代码的时候遇到了不少问题,比如在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');
            }
        });
    }

}

页面中的代码

@H_404_82@
<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~

原文链接:https://www.f2er.com/ajax/160759.html

猜你在找的Ajax相关文章