今天翻以前的筆記發現了其中的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--