<%@ 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>