从Struts 2获取值到AngularJS

时间:2016-07-22 07:49:23

标签: javascript java angularjs jsp struts2

我的目标是在JSP页面中单击按钮时显示值。控制权返回$http.get("angularAction.action").success( function(data),但控制台值显示为null

动作

private LoginModel personData=new LoginModel();
private JSONObject jSONObject;

public String returnDetails(){

    System.out.println("in returnDetails");
    personData.setFirstName("James");
    personData.setLastName("John");
    jSONObject=new JSONObject();
    jSONObject.put("result",personData);
    return SUCCESS;
}

XML

<action name="angularAction" class="com.scrolls.AjsStruts.login.action.LoginAction" method="returnDetails">
            <result type="json">
                <param name="root">jSONObject</param>
                <param name="excludeNullProperties">true</param>
                <param name="noCache">true</param>
            </result>
    </action> 

JSP

   <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="ISO-8859-1">
    <title>AjsStruts</title>
    <script type="text/javascript" src="./js/angular.min.js"></script>
    <script>
    var app = angular.module('myApp', []);

    function MyController($scope, $http) {
    $scope.getDataFromServer = function() {
            $http.get("angularAction.action").success(
                    function(data) {
                            console.log(data.result);
                            $scope.person = data.result;
                    }).error(function(data) {
                                    // called asynchronously if an error occurs
                                    // or server returns response with an error status.
            });
    };
    };
    </script>
</head>
<body>
    <h1>Get Data</h1>
    <div data-ng-app="myApp">
    <div data-ng-controller="MyController">
            <button data-ng-click="getDataFromServer()">
            Fetch data from server
            </button>
            <p>First Name : {{person.firstName}}</p>
            <p>Last Name : {{person.lastName}}</p>
            {{person}}
    </div>
    </div>
</body>

1 个答案:

答案 0 :(得分:4)

问题有三页,更正代码是

<强>动作

 public String returnDetails(){
    personData.setFirstName("James");
    personData.setLastName("John");
    return SUCCESS;
}

需要创建personData的getter和setter

<强> XML

  <action name="angularAction"  class="com.scrolls.AjsStruts.login.action.LoginAction" method="returnDetails">
            <result type="json">
                <param name="root">personData</param>
                <param name="excludeNullProperties">true</param>
                <param name="noCache">true</param>
            </result>
    </action> 

<强> JSP

 <script>
    var app = angular.module('myApp', []);

    function MyController($scope, $http) {
    $scope.getDataFromServer = function() {
            $http.get("angularAction.action").success(
                    function(response) {
                        console.log(response);
                            $scope.person = response.data;
                    }).error(function(data, status, headers, config) {
                                    // called asynchronously if an error occurs
                                    // or server returns response with an error status.
            });
    };
    };
    </script>