可以使用在线的CDN ， 也可以下载导入
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script> <script src="http://www.likecs.com/${pageContext.request.contextPath}/jquery-3.4.1.min.js"></script> 3.5 编写index.jsp测试 <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Ajax</title> <script src="http://www.likecs.com/${pageContext.request.contextPath}/jquery-3.4.1.min.js"></script> <script type="text/javascript"> function a1() { $.post({ url:"${pageContext.request.contextPath}/a1", data:{'name':$("#txtName").val()}, success:function (data,status) { alert(data); alert(status); } }) } </script> </head> <body> <%--onblur：失去焦点触发事件--%> 用户名:<input type="text" onblur="a1()"/> </body> </html>当我们鼠标离开输入框的时候，可以看到发出了一个ajax的请求，是后台返回给我们的结果
实体类User
public class User { private String name; private int age; private String sex; // Get/Set方法 // toString() // 有参无参方法 }Controller类
@RestController public class AjaxController { @RequestMapping("/a2") public List<User> ajax2(){ List<User> list = new ArrayList<User>(); list.add(new User("1",1,"男")); list.add(new User("2",2,"男")); list.add(new User("3",3,"男")); return list; } }添加了@RestController注解，将list转成json格式返回
前端页面
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Title</title> <script src="http://www.likecs.com/${pageContext.request.contextPath}/jquery-3.4.1.min.js"></script> </head> <body> <input type="button" value="获取数据"/> <table> <tr> <td>姓名</td> <td>年龄</td> <td>性别</td> </tr> <tbody> </tbody> </table> <script type="text/javascript"> $(function () { $("#btn").click(function () { $.post({ url:"${pageContext.request.contextPath}/a2", success:function (data) { alert("1"); console.log(data); var html=""; for (let i = 0; i < data.length; i++) { html+="<tr>"+ "<td>"+data[i].name+"</td>"+ "<td>"+data[i].age+"</td>"+ "<td>"+data[i].sex+"</td>"+ "</tr>" } $("#content").html(html); } }) }) }) </script> </body> </html>