首先可以简单地理解一下ajax的步骤：
第一：可以把ajax看作是一次普通的请求，那么既然是一次请求，就需要说明，想哪里，以get还是post的方式请求（请求的的同时还可以携带参数），请求结束之后，还会有返回的数据。
那么ajax在这个逻辑上，就可以这么写：
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <script type="text/javascript" src="js/jquery-3.6.0.js"></script> <!--这里是导入jquery--> <script type="text/javascript"> $(function (){ $("#btn").click(function () { /*这里是说：在btn 这个按钮被点击的时候，做如下操作*/ $.ajax({ /*发起ajax请求 想着就是一次普通的请求*/ url:"doajax", /*既然是请求，向谁请求？这里对应后端的一个RequestMapping（“xxx”）里面的xxxx*/ type:"get", /*既然是请求，就有get和post请求方式，是哪一种需要在此说明，不写也可以，默认是get*/ data:{ s:"ni hao ajax " /*既然是请求，可以携带数据，格式是key1：value1，key2：value2，xxxxxx*/ }, dataType:"json", /*既然是请求，就有返回的数据，返回的数据是什么格式*/ success:function (studentList){ /*这里是显示数据的逻辑，用的是代码加数据拼接的形式*/ $("#studentTable").append( "<tr>\n" + "<td>name</td>\n" + "<td>age</td>\n" + "</tr> " ) for (var i in studentList) { $("#studentTable").append( "<tr><td>"+studentList[i].name+ "</td><td>"+studentList[i].age+"</td></tr>" ) } } }) }); }) </script> <body > <center> <input type="button" id="btn" value="按钮" > <table id="studentTable"> </table> </div> </center> </body> </html>
后端的controller层也贴一下吧：
import org.example.pojo.Student; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; import java.util.ArrayList; import java.util.List; @Controller public class MyController { @RequestMapping("/doajax") @ResponseBody public List<Student> doAjax(String s ){ List<Student> studentList=new ArrayList<>(); studentList.add(new Student("zhangsan",20)); studentList.add(new Student("lisi",22)); System.out.println(s); /*这里我并没有对传过来的参数经行加工，只是简单的演示一下后端是可以收到请求时候携带的参数的，注意，参数名要一致*/ return studentList; } }
效果如下：
点击之后：
