宋咯咯

导航

Vue.js连接后台数据jsp页面 ￣▽￣ 

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<!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>
<div id="app">
<table border="1" width="700px">
    <tr>
        <td>id</td>
        <td>名字</td>
        <td>性别</td>
        <td>年龄</td>
        <td>是否获奖</td>
    </tr>
    <tr v-for="ss in userList">
        <td>{{ss.id}}</td>
        <td>{{ss.userName}}</td>
        <td>{{ss.sex}}</td>
        <td>{{ss.age}}</td>
        <td>{{ss.status}}</td>
        <td>访问</td>
    </tr>
    
</table>
</div>
</body>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/vue.js"></script>
<script type="text/javascript">
    $.post("userAction_getAllUser",null,function(data){
        var vm = new Vue({
            el:'#app',
            data:data,
            timeout:3000,
            success:function(result){
                new Vue({
                    el:'#app',
                    data:myModel
                });
                
            },
            error:function(){
                alert('咦~出错了！');
            }
          })
    });
    
    
/*    
//第二种方法
var myModel={userList:[]};
    var vm = new Vue({
        el:'#app',
        data:myModel
    });
    function getData(){
        $.ajax({
            url:"userAction_getAllUser",
            type:'POST',
            dataType:'json',
            timeout:3000,
            success:function(result){
                myModel.userList = result.userList
            },
            error:function(){
                alert('咦~出错了！');
            }
        });
    }
getData();
*/   
    
    </script>
</html>

下面是后台Action的一部分代码

@Autowired
    private UserService userService;

    public String getAllUser(){
        jsonMap = new HashMap<String, Object>();
        jsonMap.put("postStatus",1);//代表没有异常，成功生成数据
      //  jsonMap.put("message","恭喜!数据成功生成（给前端工程师看）");
        List<User> userList = userService.getAllUser();
        jsonMap.put("userList",userList);
        return "jsonOK";
    }

Struts配置

<struts>
    <constant name="struts.objectFactory" value="spring"></constant>
    <package name="myPackage" extends="struts-default,json-default">
        <action name="userAction_*" class="userAction" method="{1}">
            <result type="json" name="jsonOK">
                <param name="root">jsonMap</param>
            </result>
            <allowed-methods>getAllUser</allowed-methods>
        </action>

    </package>
</struts>

 

posted on 2017-11-29 15:03  宋咯咯  阅读(7053)  评论(1)  编辑  收藏  举报