zoukankan      html  css  js  c++  java
  • 前后端

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

  • 相关阅读:
    mexopencv
    Computer Vision Resources
    Immersive Imaging
    汇编指令
    I/O输入系统
    大容量存储器的结构
    文件系统实现
    文件系统接口
    虚拟内存
    内存管理
  • 原文地址:https://www.cnblogs.com/linglansen/p/7922870.html
Copyright © 2011-2022 走看看