今天翻以前的笔记发现了其中的Dojo代码，它被后来的JQuery取代了，jQuery又被Vue/React要赶下台了，前台真是你未唱罢我登场，程序员每次不跟还不行，跟了把总是觉得新瓶装旧酒，腻歪了。
本文例程下载：
https://files.cnblogs.com/files/heyang78/myBank_thymeleaf_jQuery_Ajax_table210906_2051.rar
正文：
第一步：前台页面
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>Show all students</title> <script type="text/javascript" src="js/jquery-3.6.0.min.js"></script> <script type="text/javascript"> $(function(){ $("#showBtn").click(function(){ $.ajax({ url: "allStus",// 请求的地址 data:{},// 请求参数--没有 type:"get",// 请求方式 dataType:"json",// 服务器返回的数据类型即为json对象 success: function(resp) { var students=resp; showStudents(students); }, timeout: 50000,// 超时时间，超时后会调用error后的函数 error: function(xhr, textStatus, errorThrown) { // 404 请求地址无效 if(XMLHttpRequest.status=='404'){ alert("404:请求地址"+url+"无效."); return; } var msg="xhr.readyState="+xhr.readyState+"\n"; msg+="xhr.status="+xhr.status+"\n"; msg+="textStatus="+textStatus+"\n"; msg+="errorThrown="+errorThrown+"\n"; alert(msg); } }); }); }); function showStudents(students){ var table=document.getElementById("myTable"); // remove remained rows var trs=table.childNodes; for(var i=trs.length-1;i>=0;i--){ table.removeChild(trs[i]); } // add new rows var n=students.length; for(var i=0;i<n;i++){ var stu=students[i]; var td1=document.createElement("td"); td1.appendChild(document.createTextNode(stu.id)); var td2=document.createElement("td"); td2.appendChild(document.createTextNode(stu.name)); var tr=document.createElement("tr"); tr.appendChild(td1); tr.appendChild(td2); table.appendChild(tr); } } </script> </head> <body> <h1>Show all students using jquery.</h1> <button id="showBtn">Show</button> <table border="1px" width="160px"> <caption>five students</caption> <thead> <tr><th>id</th><th>name</th></tr> </thead> <tbody id="myTable" > </tbody> </table> </body> </html>
以上代码需要说明的就是url: "allStus"一处，它与后台的JsonAction的一个相应函数是对应上的，其它代码无需赘述。
2.后台响应代码
@RestController public class JsonController { @Autowired private StudentMapper studentMapper; @GetMapping("/allStus") public List<Student> getAllStudents() { List<Student> students=studentMapper.findAll(); return students; } }
这个函数的注解是和页面上url对应上的，而返回数据貌似是对象，但由于@RestController的作用，直接变成了json对象，页面上resp对象就是它，往后直接用就可以了。
3.访问数据库的代码
@Mapper public interface StudentMapper { ...... @Select("select * from student") List<Student> findAll(); ...... }
这个就是简单查询student表。
有这三部分，前台页面通过Ajax方式传递请求到后台Rest控制器，然后访问数据库返回json对象的过程就齐活了。
--END--