首先可以简单地理解一下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;
}
}
效果如下：
点击之后：
