本文例程下载：https://files.cnblogs.com/files/heyang78/myBank_axios_thymeleaf_mybatis_210907_1623.rar
1.做好跳转
本例中页面是axiosShowAll.html，我们自然要在ActionController里做一个跳转。
@Controller public class ActionController { ...... @RequestMapping("/axiosShowAll") public String showAxiosShowAllPage() { return "axiosShowAll"; } ...... }
制作好这个后，就能到达我们编辑的页面了。
2.准备页面，源码如下：
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>Show all students using axios</title> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <h1>Show all students using axios.</h1> <input type="text" id="nametxt"/> <button id="searchBtn" onclick="search()">Search</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> <script type="text/javascript"> function search(){ var name=document.getElementById("nametxt").value;
axios({ method:'get', url:'searchStus?name='+name, responseType:'json', }).then(function(resp){ console.log(resp); if(resp.status==200){ var students=resp.data; showStudents(students); } }).catch(function(error){ console.log(error); }); } 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>
上面核心部分就是：
axios({ method:'get', url:'searchStus?name='+name, responseType:'json', }).then(function(resp){ console.log(resp); if(resp.status==200){ var students=resp.data; showStudents(students); } }).catch(function(error){ console.log(error); });
上面关键是url里的路径和参数，他们将决定会访问JsonController里的响应函数。
另需注意的是resp.data才是返回的数据。
3.准备响应函数：
@RestController public class JsonController { @Autowired private StudentMapper studentMapper; ...... @GetMapping("/searchStus") public List<Student> searchStudents(String name) { List<Student> students=studentMapper.searchByName("%"+name+"%"); return students; } }
4.在mapper里写SQL语句；
@Mapper public interface StudentMapper { @Select("select * from student where name like #{name} ") List<Student> searchByName(@Param("name") String name); ...... }
以上四步完成无误，程序便运行通畅了，实际上axios和jQuery的Ajax方法差不多，需要注意resp.data才是返回的数据就OK了，而ajax方法resp就是返回的数据。
--END--