如何在Struts2项目中使用angular $ http.get（）从action class获取数据

问题描述：

我正在使用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”）。成功（功能（数据）。

是“angularAction”的正确URL吗？你可以使用你的浏览器的开发工具（通常你可以通过CTRL + SHIFT + I访问它）来检查它，然后进入“网络”栏并查看电话是否正确 – valepu

你也设置了$ scope.itemsdata = data;但随后调用console.log（$ scope.person）;这是一个不同的变量 – valepu

控制器初始化在哪里？你错过了这样的一行：app.controller（'demoCtrl'，[“$ scope”，“$ http”，MyController]）;函数声明之后。并在HTML代码中调用“loadData（）”，但控制器中的函数在编辑时称为“getDataFromServer” – valepu

答

有几个错误你的角码。

检查“angularAction”是正确的URL，它会指向类似http://yourserver/jsplocation/angularAction例如，如果你的JSP位于http://localhost/pages/page.jsp则调用将是http://localhost/pages/angularAction
最重要的是，您的angularAction是否在JSON中返回数组？您可以检查直接在浏览器中键入您的angularAction的网址，看到了结果
设置$scope.itemsdata=data;但你打电话console.log($scope.person);成功的功能是不同的变量从未设置的代码

内内

您从未将控制器设置在您的模块内。试试这个

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]);

在你的HTML中调用“loadData（）;”但是您在控制器中设置的功能称为“getDataFromServer”
您在<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控制台，但它应该已经警告过你关于缺少的控制器和其他一切）。

先生，谢谢lot.I更改我的代码，请更正我 –

看到我的新评论 – valepu

URL正确当我调试使用My Intelijidea正确地通过操作类中的方法。 –

如何在Struts2项目中使用angular $ http.get（）从action class获取数据

相关推荐