一:下图是前端JSP代码
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <body> <img src="${pageContext.request.contextPath}/img/1.jpg" onclick="javascript:getData()"> <table id="myView" border="1px"> <tr> <th>编号</th> <th>书名</th> <th>价格</th> </tr> <tr v-for="book in bookList"> <td>{{book.id}}</td> <td>{{book.name}}</td> <td>{{book.price}}</td> </tr> </table> </body> <script src="${pageContext.request.contextPath}/js/vue.js"></script> <script src="${pageContext.request.contextPath}/js/jquery-3.2.1.min.js"></script> <script> var myModel1 = {bookList:[]}; var myVieModel=new Vue({ el:"#myView", data:myModel1 }); //写出函数的目的,为了（复用） function getData(){ $.ajax({ url:"bookAction_getAllBook", //后端的API地址 type:"GET", //http:post/get dataType:"json", //服务端返回类型text,json timeout:3000, success:function(result){ myModel1.bookList = result.bookList; }, error:function(){ alert("服务忙"); } }); } getData(); </script> </html>
二：代码链接：