在Vue.js使用配置（SSH框架的附帶使用下）{其余代碼同上}
<%@ 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="img/timg.jpg" onclick="javascript:getData()">
<br/>
<div id="myView2">
<span>請輸入書名：</span>
<input v-model="bookName"/>
<img src="img/se.png" v-on:click="queryBook">
</div>
<br/>
<table border="1px" id="myView">
<tr>
<th>ID</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 type="text/javascript">
//bookList不能為空，否則會跟view綁定失敗
var clientInput = {bookName:‘‘};//此JSON目的用於提交給服務器查詢用的
var myViewModel2 = new Vue({
el:‘#myView2‘,
data:clientInput,
methods:{
queryBook:function(){
//把客戶輸入的內容 $(‘#bookName‘).val()
//賦值給clientInput這個JSON
//clientInput.bookName = $(‘#bookName‘).val();
$.ajax({
//url:‘44.jsp‘,
url:‘bookAction_queryBook‘,
type:‘GET‘,
data:clientInput,
dataType:‘json‘,
timeout:2000,
success:function(result){
//alert(result.bookList);
myModel.bookList = result.bookList;
},
error:function(XMLHttpRequest, textStatus, errorThrown){
alert(‘服務器忙，請不要說臟話，理論上大家都是文明人‘);
alert(textStatus+XMLHttpRequest.status);
}
});
}
}
});
var myModel = {bookList:[]};
var myViewModel = new Vue({
el:‘#myView‘,
data:myModel
});
//寫成函數的目的，為了【復用】
function getData(){
//alert(11);
$.ajax({
url:"bookAction_getAllBook", //後端的API地址
type:‘GET‘, //http:POST/GET
//data:postData, //指客戶端提交給後臺的參數
dataType:‘json‘, //服務端返回類型text,json
timeout:2000,
success:function(result){
myModel.bookList = result.bookList;
},
error:function(XMLHttpRequest, textStatus, errorThrown){
alert(‘服務器忙，請不要說臟話，理論上大家都是文明人‘);
alert(textStatus+XMLHttpRequest.status);
}
});
}
getData();
</script>
</html>
在Vue.js使用配置（SSH框架的附帶使用下）{其余代碼同上}