1.需求
2.代码实现
- controller
@RequestMapping("/t3") public String test03(String name,String pwd){ System.out.println("test03==>"); String msg = ""; if (name!=null){ if ("admin".equals(name)){ msg = "ok"; }else { msg = "用户名有误"; } } if (pwd!=null){ if ("123".equals(pwd)){ msg = "ok"; }else { msg = "密码有误"; } } return msg; }
注意:我们使用的是注解@RestController,所以返回的结果不会走视图解析器而是直接返回给前端页面
- 视图
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Title</title> <script src="${pageContext.request.contextPath}/statics/js/jquery-3.5.1.js"></script> <script> function a1(){ $.post({ url:"${pageContext.request.contextPath}/t3", data:{"name":$("#name").val()}, success:function (data){ console.log(data); $("#span1").css("color","red") if (data === 'ok'){ $("#span1").css("color","green") } $("#span1").html(data) } }) } function a2(){ $.post({ url:"${pageContext.request.contextPath}/t3", data:{"pwd":$("#pwd").val()}, success:function (data){ console.log(data); $("#span2").css("color","red") if (data === 'ok'){ $("#span2").css("color","green") } $("#span2").html(data) } }) } </script> </head> <body> 用户名:<input type="text" id="name" onblur="a1()"> <span id="span1"></span><br> 密 码:<input type="text" id="pwd" onblur="a2()"> <span id="span2"></span> </body> </html>
3.测试
4.注意
在使用的时候可能返回的数据出现乱码情况,这个时候我们应该使用的是JSON数据格式的乱码处理,因为我们后端直接返回的是一个字符串,jQuery.ajax()就会按照JSON的数据格式来接收