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

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

这几天写代码的时候遇到了不少问题,比如在ajax发送请求之后服务端发回的数据要和js中定义的字符串进行比较但是明明写的一样却总是比较出错

先放js中的代码

function@H_404_15@ check_name@H_404_15@()@H_404_15@ {@H_404_15@
    var@H_404_15@ str = $('#code'@H_404_15@).val();
    var@H_404_15@ msg = $('#msg_n'@H_404_15@);
    if@H_404_15@(!/\w{3,12}/@H_404_15@.test(str)) {
        msg.html('用户名不符合要求'@H_404_15@);
        name = false@H_404_15@;
    } else@H_404_15@ {
        $.ajax({
            url:'checkName.do'@H_404_15@,type:'post'@H_404_15@,data:{'name'@H_404_15@:str},dataType:'text'@H_404_15@,success:function@H_404_15@ (data)@H_404_15@ {@H_404_15@
                if@H_404_15@(data == 'pass'@H_404_15@) {
                    changeClass(msg,'text-danger'@H_404_15@,'text-success'@H_404_15@);
                    name = true@H_404_15@;
                    submit_regi();
                } else@H_404_15@ {
                    changeClass(msg,'text-success'@H_404_15@,'text-danger'@H_404_15@);
                    name = false@H_404_15@;
                }
                msg.html(data);
            },error:function@H_404_15@()@H_404_15@ {@H_404_15@
                console.log('error'@H_404_15@);
            }
        });
    }

}

页面中的代码

<div@H_404_15@ class@H_404_15@="form-group"@H_404_15@>
  <label for@H_404_15@="code"@H_404_15@>用户名</label>
  <input type="text"@H_404_15@ class@H_404_15@="form-control"@H_404_15@ id@H_404_15@="code"@H_404_15@ placeholder="3-12位数字,下划线,字母的组合"@H_404_15@ onBlur="check_name();"@H_404_15@ required name@H_404_15@="name"@H_404_15@>
  <p id@H_404_15@="msg_n"@H_404_15@ class@H_404_15@="text-danger"@H_404_15@></p>
</div@H_404_15@>

之后Controller层是这样处理的

@RequestMapping("checkName.do"@H_404_15@)
    public void checkName(HttpServletRequest request,HttpServletResponse response) {
        response.setCharacterEncoding@H_404_15@("utf-8"@H_404_15@);@H_404_15@
        PrintWriter out@H_404_15@;@H_404_15@
        try {
            out@H_404_15@ = response.getWriter@H_404_15@();@H_404_15@
            if(basicService.findByName@H_404_15@(request.getParameter@H_404_15@("name"@H_404_15@))) {
                out@H_404_15@.println@H_404_15@("用户名已存在"@H_404_15@);@H_404_15@
            } else {
                out@H_404_15@.println@H_404_15@("pass"@H_404_15@);@H_404_15@
            }
        } catch (IOException e) {
            LOG.error@H_404_15@("IO异常,请检查网络"@H_404_15@);@H_404_15@
            request.getRequestDispatcher@H_404_15@("error.jsp"@H_404_15@);@H_404_15@
            e.printStackTrace@H_404_15@();@H_404_15@
        }
    }

这样前后端的代码就都完成了,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@H_404_15@(data.substr(0@H_404_15@,4@H_404_15@) == 'pass') {
    changeClass(msg,'text@H_404_15@-danger','text@H_404_15@-success');
    name@H_404_15@ = true@H_404_15@;
    submit_regi();
} else@H_404_15@ {
    changeClass(msg,'text@H_404_15@-success','text@H_404_15@-danger');
    name@H_404_15@ = false@H_404_15@;
}

至于为什么发送了pass这个字符串接收的时候返回的字符串长度是5,这其实是由于println()方法造成的,因为println方法会在输入参数的最后加上换行符

所以其实不用改动js代码,直接将println()方法改成print()方法就好了

ok~

猜你在找的Ajax相关文章