Question

我有一个非常简单的Spring Rest后端，它返回JSON数据。宁静的URL在我的浏览器中工作如下： http://localhost:8080/abc/runlist

它返回如下数据：

[{"stock_num":"KOH19","damage":"Toronto (Oshawa)"},{"stock_num":"AZ235","damage":"Toronto (Oshawa)"},...

我有一个独立的html页面，不属于我的网络应用程序。我只是想测试我的角度代码是否正在获取数据，然后循环遍历它。

<!DOCTYPE html>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="customersCtrl">

<ul>
  <li ng-repeat="x in names">
    {{ x }}
  </li>
</ul>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("http://localhost:8080/abc/runlist")
.success(function (response) {$scope.names = response.records;});
});
</script>

yo yo

</body>

`

为什么不起作用？我在Spring遇到了一些需要实现CORS的东西。我这样做了，但仍然没有回复：

@Component
public class SimpleCORSFilter implements Filter {
public void doFilter(ServletRequest req, ServletResponse res, FilterChain  
chain) throws IOException, ServletException {
    HttpServletResponse response = (HttpServletResponse) res;
    response.setHeader("Access-Control-Allow-Origin", "*");
    response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, 
DELETE");
    response.setHeader("Access-Control-Max-Age", "3600");
    response.setHeader("Access-Control-Allow-Headers", "x-requested-with");
    chain.doFilter(req, res);
}
public void init(FilterConfig filterConfig) {}
public void destroy() {}
}

Answer 1

尝试类似：

JS：

var app = angular.module('myApp', []);
 app.controller('customersCtrl', function($scope, $http) {
  $http.get("http://localhost:8080/abc/runlist")
           .success(function (response){
              $scope.names = records;
           });
});

HTML：

<ul>
  <li ng-repeat="x in records">
    {{x}}
  </li>
</ul>

更多参数html：

<ul>
  <li ng-repeat="x in records">
    {{x.myName}}
    {{x.myNumber}}
  </li>
</ul>

希望我一直很有帮助。

Answer 2

尝试将退货放在$ http.get

前面

<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
    return $http.get("http://localhost:8080/abc/runlist").success(function (response) {
        $scope.names = response;
    });
});
</script>

然后在您的视图中使用点表示法来引用要显示的属性，例如

{{x.stock_num}}

Answer 3

知道了！有2个修复：

首先，我必须实现CORS过滤器和类，以便不会出现此错误：

org.apache.catalina.connector.ClientAbortException: java.io.IOException: An established connection was aborted by the software in your host machine
at org.apache.catalina.connector.OutputBuffer.realWriteBytes(OutputBuffer.java:393)
at org.apache.tomcat.util.buf.ByteChunk.flushBuffer(ByteChunk.java:426)
at org.apache.tomcat.util.buf.ByteChunk.append(ByteChunk.java:339)
at org.apache.catalina.connector.OutputBuffer.writeBytes(OutputBuffer.java:418)
at org.apache.catalina.connector.OutputBuffer.write(OutputBuffer.java:406)

其次，警告例如复印机！我从W3Schools复制了上面的简单示例，这是一个很棒的教程网站：

$http.get("http://localhost:8080/abc/runlist")
.success(function (response) {$scope.names = response.records;});

请注意响应结束时的.records。这不是必需的。当我把它取下来时，它起作用了。

Answer 4

很可能是因为您使用var pattern = /(?<!"")\:([^\:]*)\:/g;计划造成的。有关推理，请参阅链接问题here的中间项目符号。基本上，file://请求的原点将为空，这会导致file://失败，XmlHttpRequest依赖于此。

Answer 5

试试这个：

 $http.get("http://localhost:8080/abc/runlist")
.success(function (response, data, headers, status, config) {
  $scope.names = response.names;
});

希望它能奏效。：）

简单的angularJS GET功能，localhost无法正常工作

5 个答案: