2016-07-22 61 views
2

我的目標是顯示JSP頁面中按鈕單擊的值。控制返回$http.get("angularAction.action").success( function(data),但在控制檯顯示的測量值null從Struts 2獲取值到AngularJS

行動

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> 
+0

重命名'jSONObject'一些不與一個小寫字母開頭的名字。 –

+0

我已將'jSONObject'更改爲'result',但沒有任何更改 – Asha

+0

嘗試將'data'輸出到控制檯。 –

回答

4

的問題是有三頁,更正後的代碼是

行動

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

getter和personData的制定者需要創造

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>