前后端

一:下图是前端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>

二：代码链接：

这是后台代码链接:https://coding.net/u/LinglanSen/p/testvue/git

posted @ 2017-11-29 21:39  凌岚森  阅读(210)  评论(0)  编辑  收藏  举报