<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Title</title> <script src="statics/js/jquery-3.5.1.js"></script> <script> function a1() { $.post({ url: "${pageContext.request.contextPath}/a3", data:{"name":$("#name").val()}, success:function (data) { //callback 回调函数 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) { //callback 回调函数 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>
AjaxController
package com.min.controller; import com.min.pojp.User; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import javax.servlet.http.HttpServletResponse; import java.io.IOException; import java.util.ArrayList; import java.util.List; @RestController //加上这个会自动返回字符串 public class AjaxController { @RequestMapping("/t1") public String test() { return "hello"; } @RequestMapping("/a1") public void a1(String name, HttpServletResponse response) throws IOException { System.err.println("a1:param=>" + name); if ("666".equals(name)) { response.getWriter().print("true"); } else { response.getWriter().print("false"); } } @RequestMapping("/a2") public List<User> a2() { //接收 添加数据 返回数据 List<User> userList = new ArrayList<User>(); userList.add(new User("张三", 18, "男")); userList.add(new User("李四", 22, "男")); userList.add(new User("王五", 16, "男")); return userList; } @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; } }