黑马程序员JAVAWEB教程P141课后练习

原创已于 2022-05-12 17:16:23 修改 · 2.1k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #javascript #前端

于 2022-05-12 17:09:09 首次发布

这篇博客探讨了在JAVA WEB环境中使用axios进行AJAX登录验证的问题。作者遇到的问题在于响应数据类型的判断，最初误以为是布尔类型，但实际上需要根据服务器返回的字符串进行判断。博客内容包括了GET和POST两种提交方式的示例代码，展示了如何在前端捕获并处理服务器返回的数据来显示或隐藏错误提示。

黑马程序员JAVAWEB教程P141课后练习

尝试过的错误：

1.在then方法体里的判断逻辑使用AJAX一样的格式：

 if (this.responseText == "true") {
                    document.getElementById("username_err").style.display = '';
                } else {
                    document.getElementById("username_err").style.display = 'none';

2.改为resp.data后判断逻辑等于使用字符串类型而不是布尔类型，加了一对双引号。不知道为什么，即使在Servlet里执行的是

response.getWriter().write(“true”);

在web端判断时要是boolean类型

<!--用axios实现登录判断====get提交-->
<script src="./js/axios-0.18.0.js"></script>

<script>

    document.getElementById("username").onblur = function () {
        var username = this.value;
        //发送异步请求
        axios.get("http://localhost:8080/ajax-demo/selectUserServlet?username=" + username)
            .then(function (resp) {
            if (resp.data == true) {
                document.getElementById("username_err").style.display = '';
            } else {
                document.getElementById("username_err").style.display = 'none';
            }
        })
    }
</script>

<!--用axios实现登录判断====post提交-->
<script src="./js/axios-0.18.0.js"></script>

<script>

    document.getElementById("username").onblur = function () {
        var username = this.value;
        //发送异步请求
        axios.post("http://localhost:8080/ajax-demo/selectUserServlet","username="+username)
            .then(function (resp) {
                if (resp.data == true) {
                    document.getElementById("username_err").style.display = '';
                } else {
                    document.getElementById("username_err").style.display = 'none';
                }
            })
    }
</script>