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 测试：
如果出现乱码，将下面的添加进去
<!--解决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就结束了，让我们下期再见