Ajax进行用户名验证

最新推荐文章于 2021-08-05 17:42:57 发布

童、一

最新推荐文章于 2021-08-05 17:42:57 发布

阅读量316

点赞数

分类专栏： # SpringMVC 文章标签： ajax springmvc

本文链接：https://blog.csdn.net/weixin_44432831/article/details/115339897

版权

SpringMVC 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

学习目标：

Ajax进行用户名验证

学习内容：

Ajax进行用户名验证

学习时间：

学习产出：

接上篇

5、使用Ajax进行用户名验证

(1)、springmvc配置:springmvc-servlet.xml加入json乱码配置

<!--注解驱动-->
    <mvc:annotation-driven>
        <!--JSON乱码问题配置-->
        <mvc:message-converters register-defaults="true">
            <bean class="org.springframework.http.converter.StringHttpMessageConverter">
                <constructor-arg value="UTF-8"/>
            </bean>
            <bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">
                <property name="objectMapper">
                    <bean class="org.springframework.http.converter.json.Jackson2ObjectMapperFactoryBean">
                        <property name="failOnEmptyBeans" value="false"/>
                    </bean>
                </property>
            </bean>
        </mvc:message-converters>
    </mvc:annotation-driven>

(2)、controller:AjaxController

/当焦点移除时，前端会将账号或者密码传回后端，如果用户名或者密码正确，那么返回OK给前端
    @RequestMapping("/a3")
    public String Ajax3(String name,String password){
        String msg = "";
        if(name!=null){
            if("admin".equals(name)){
                msg="OK";
            }else{
                msg="用户名错误";
            }
        }
        if(password!=null){
            if("123456".equals(password)){
                msg="OK";
            }else{
                msg="密码错误";
            }
        }
        return msg;
    }

(3)、前端:test2.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Ajax验证用户名</title>
    <script src="${pageContext.request.contextPath}/js/jquery.js"></script>
    <script>
        /*
        * 当焦点移除时，触发a1函数，将用户名传给后端，如果传回的msg为OK,
        * 那么将提示的nameInfo颜色通过css修改为绿色，并通过html显示
        * 否则将nameInfo颜色修改为红色
        * */
        function a1(){
            $.post({
                url:"${pageContext.request.contextPath}/a3",
                data:{"name":$("#name").val()},
                success:function (data){
                    if(data.toString()=='OK'){
                        $("#nameInfo").css("color","green");
                    }else {
                        $("#nameInfo").css("color","red");
                    }
                    $("#nameInfo").html(data);
                }
            });
        }

        
        function a2(){
            $.post({
                url:"${pageContext.request.contextPath}/a3",
                data:{"password":$("#password").val()},
                success:function (data){
                    if(data.toString()=='OK'){
                        $("#passwordInfo").css("color","green");
                    }else{
                        $("#passwordInfo").css("color","red");
                    }
                    $("#passwordInfo").html(data);
                }
            })
        }
    </script>
</head>
<body>
<p>
    用户名:<input type="text" id="name" οnblur="a1()">
    <span id="nameInfo"></span>
</p>
<p>
    密码:<input type="text" id="password" οnblur="a2()">
    <span id="passwordInfo"></span>
</p>
</body>
</html>