Ajax异步校验与乱码解决-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_46170033/article/details/106952042

Ajax技术

1.使用JQuery中的Ajax实现异步校验

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="${pageContext.request.contextPath}/js/jquery-3.5.1.js"></script>
    <script>
        function a1() {
            $.post({
                url:"${pageContext.request.contextPath}/a3",
                data:{"name":$("#name").val()},
                success:function (data) {
                    if (data.toString()=="ok"){
                    $("#userInfo").css("color","green");
                    }else{
                        $("#userInfo").css("color","red");
                    }
                    $("#userInfo").html(data);
                }
            })
        }
        function a2() {
            $.post({
                url:"${pageContext.request.contextPath}/a3",
                data:{"pwd":$("#pwd").val()},
                success:function (data) {
                    if (data.toString()=="ok"){
                        $("#pwdInfo").css("color","green");
                    }else{
                        $("#pwdInfo").css("color","red");
                    }
                    $("#pwdInfo").html(data);
                }
            })
        }
    </script>
</head>
<p>
    用户名:<input type="text" id="name" onblur="a1()">
    <span id="userInfo" ></span>
</br>
    密码:<input type="password" id="pwd" onblur="a2()">
    <span id="pwdInfo" ></span>
</p>
</body>
</html>

@RequestMapping("/a3")
public String a3(String name,String pwd){
    String msg="";
    if (name!=null){
        if("admin".equals(name)){
            msg = "ok";
        }else{
            msg="用户名有误";
        }
    }
    if (pwd!=null){
        if("123456".equals(pwd)){
            msg = "ok";
        }else{
            msg="密码有误";
        }
    }
    return msg;
}

2.解决乱码

<mvc:annotation-driven>
    <mvc:message-converters>
        <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>