2015-10-06 37 views
-2

我正在使用angular和struts2 + maven開發項目。 這是我的動作類

package com.ai.action; 

import com.ai.model.PersonData; 
import com.ai.model.Village; 
import com.ai.service.PersonService; 
import java.util.ArrayList; 
import java.util.List; 
import java.util.Map; 
public class AngularAction implements Action { 

private Map session = ActionContext.getContext().getSession(); 
private Logger logger = LoggerFactory.getLogger(PersonAction.class); 

private List<Village> STSarray; 
@Autowired 
private PersonService personService; 

public String execute() 
{ 
    List<Village> STSarray = personService.getAllVillage(); 

    logger.info("save method {}",getSTSarray()); 
    return SUCCESS; 
} 

public List<Village> getSTSarray() { 
    return STSarray; 
} 

public void setSTSarray(List<Village> STSarray) { 
    this.STSarray = STSarray; 
} 

} 

在這裏,我使用DAO與Hibernate加載數據到 列表
。數據已成功添加到數組中。 然後我想要獲得這個數據到jsp頁面。

struts.xml的

<action name="angularAction" class="com.ai.action.AngularAction"> 
     <result type="json"> 
      <param name="root">personData</param> 
      <param name="excludeNullProperties">true</param> 
      <param name="noCache">true</param> 
     </result> 
    </action> 

這是我的jsp頁面。

<!DOCTYPE html> 
<html ng-app="demo"> 
<head> 
<meta charset="ISO-8859-1"> 
<title>AJAX with Struts 2 using AngularJS</title> 
<link href="css/bootstrap.css" rel="stylesheet" /> 
<link href="css/bootstrap-theme.css" rel="stylesheet" /> 
<script type="text/javascript" src="scripts/angular.min.js"></script> 
    <script type="text/javascript"> 


    angular.module("demo", []) 
      .controller("demoCtrl", function ($scope, $http) { 

       $scope.loadData = function() { 

        $http.get("angularAction").success(function (data) { 

         $scope.person = data; 
         console.log($scope.person); 
        }); 
       } 
      }); 

</script> 
</head> 
<body ng-controller="demoCtrl"> 
<table class="table table-striped"> 
<p><button data-ng-click="loadData()"> 
    Fetch data from server 
</button></p> 
<thead> 
<tr> 
    <th>Country</th> 
    <th>Name</th> 
    <th>Size</th> 
</tr> 
</thead> 
<tbody> 
<tr ng-repeat="item in person"> 
    <td>{{item.country}}</td> 
    <td>{{item.name}}</td> 
    <td>{{item.size}}</td> 
</tr> 
</tbody> 
</table> 
</body> 
</html> 

但是 console.log($ scope.person); 給我null.please幫助。

但是,當我的動作類下面給出它正常工作。

public class AngularAction implements Action{ 

//private PersonData personData = new PersonData(); 
private List<Village> Setstow =new ArrayList<Village>(); 
private Village village = new Village(); 
private Map session = ActionContext.getContext().getSession(); 
private Logger logger = LoggerFactory.getLogger(AngularAction.class); 
private PersonData personData = new PersonData(); 

public String execute() { 

    personData.setFirstName("Mohaideen"); 
    personData.setLastName("Jamil"); 
    return SUCCESS; 
} 

public PersonData getPersonData() { 
    return personData; 
} 

public void setPersonData(PersonData personData) { 
    this.personData = personData; 
} 

正如我的想法,請告訴我如何使用獲得的動作類List STSarray數據$ http.get(「angularAction」)。成功(功能(數據)。

+0

是「angularAction」的正確URL嗎?你可以使用你的瀏覽器的開發工具(通常你可以通過CTRL + SHIFT + I訪問它)來檢查它,然後進入「網絡」欄並查看電話是否正確 – valepu

+1

你也設置了$ scope.itemsdata = data;但隨後調用console.log($ scope.person);這是一個不同的變量 – valepu

+0

控制器初始化在哪裏?你錯過了這樣的一行:app.controller('demoCtrl',[「$ scope」,「$ http」,MyController]);函數聲明之後。並在HTML代碼中調用「loadData()」,但控制器中的函數在編輯時稱爲「getDataFromServer」 – valepu

回答

0

有幾個錯誤你的角碼。

  1. 檢查「angularAction」是正確的URL,它會指向類似http://yourserver/jsplocation/angularAction例如,如果你的JSP位於http://localhost/pages/page.jsp則調用將是http://localhost/pages/angularAction
    最重要的是,您的angularAction是否在JSON中返回數組?您可以檢查直接在瀏覽器中鍵入您的angularAction的網址,看到了結果

  2. 設置$scope.itemsdata=data;但你打電話console.log($scope.person);成功的功能是不同的變量從未設置的代碼

  3. 內內

    您從未將控制器設置在您的模塊內。試試這個

    var MyController=function ($scope, $http) { 
    $scope.getDataFromServer = function() { 
        $http.get("angularAction").success(
         function(data, status, headers, config) { 
          $scope.itemsdata = data; 
          console.log($scope.itemsdata); 
         }).error(function(data, status, headers, config){}); 
        }; 
    }; 
    
    app.controller('demoCtrl', ["$scope", "$http", MyController]); 
    
  4. 在你的HTML中調用「loadData();」但是您在控制器中設置的功能稱爲「getDataFromServer」

  5. 您在<table>標記內放置了一個<p>標記(帶按鈕的標記)。你應該解決這個問題。

服務器端還有其他錯誤。你應該叫「personData」在你原來的代碼任何的命名STSarray,並且還刪除類型聲明在「執行」的方法,因爲這會使其成爲一個局部變量

package com.ai.action; 

import com.ai.model.PersonData; 
import com.ai.model.Village; 
import com.ai.service.PersonService; 
import java.util.ArrayList; 
import java.util.List; 
import java.util.Map; 
public class AngularAction implements Action { 

private Map session = ActionContext.getContext().getSession(); 
private Logger logger = LoggerFactory.getLogger(PersonAction.class); 

private List<Village> personData; 
@Autowired 
private PersonService personService; 

public String execute() 
{ 
    this.personData = personService.getAllVillage(); 

    logger.info("save method {}",getPersonData()); 
    return SUCCESS; 
} 

public List<Village> getPersonData() { 
    return personData; 
} 

public void setPersonData(List<Village> personData) { 
    this.personData = personData; 
} 

} 

這將是一個好主意使用瀏覽器的開發工具(或更好的,螢火蟲)爲了檢查您的JavaScript代碼下一次(即使我假設如果你使用console.log()你知道如何使用你的JavaScript控制檯,但它應該已經警告過你關於缺少的控制器和其他一切)。

+0

先生,謝謝lot.I更改我的代碼,請更正我 –

+0

看到我的新評論 – valepu

+0

URL正確當我調試使用My Intelijidea正確地通過操作類中的方法。 –

相關問題