为了懒,我痛心学习Ajax(三)

简介: 4.注册提示效果4.1 login.jsp4.2 controller4.3 测试:

4.注册提示效果


4.1 login.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="${pageContext.request.contextPath}statics/js/jquery-3.6.0.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>
<body>
<p>
    用户名:<input type="text" id ="name" onblur="a1()">
    <span id="userInfo"></span>
</p>
<p>
    密码:<input type="text" id ="pwd" onblur="a2()">
    <span id="pwdInfo"></span>
</p>
</body>
</html>

4.2 controller

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

4.3 测试:


微信图片_20211230233606.png


如果出现乱码,将下面的添加进去


<!--解决json 乱码配置-->
<mvc:annotation-driven>
    <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>

至此Ajax就结束了,让我们下期再见

相关文章
|
2月前
|
设计模式 前端开发 JavaScript
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)
22 0
|
6月前
|
JSON 前端开发 JavaScript
JavaScript学习 -- ajax方法的POST请求
JavaScript学习 -- ajax方法的POST请求
37 0
|
3月前
|
XML JSON 前端开发
Ajax技术【Ajax技术详解、 Ajax 的使用、Ajax请求、 JSON详解、JACKSON 的使用 】(一)-全面详解(学习总结---从入门到深化)
Ajax技术【Ajax技术详解、 Ajax 的使用、Ajax请求、 JSON详解、JACKSON 的使用 】(一)-全面详解(学习总结---从入门到深化)
58 1
|
3月前
|
JSON 前端开发 JavaScript
JavaScript学习 -- ajax方法的POST请求
JavaScript学习 -- ajax方法的POST请求
29 0
|
3月前
|
设计模式 缓存 前端开发
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)(下)
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)
15 1
|
3月前
|
前端开发 JavaScript fastjson
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)(上)
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)
24 1
|
4月前
|
前端开发 PHP 数据安全/隐私保护
【PHP学习】—利用ajax原理实现密码修改功能(九)
【PHP学习】—利用ajax原理实现密码修改功能(九)
|
4月前
|
前端开发 JavaScript PHP
【PHP学习】—利用ajax原理实现登录功能(八)
【PHP学习】—利用ajax原理实现登录功能(八)