Javascript 本地主机不工作的简单angularJS GET函数

我有一个非常简单的SpringREST后端，它返回JSON数据。restful URL在我的浏览器中的工作方式如下：

http://localhost:8080/abc/runlist

它返回如下数据：

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

我有一个独立的html页面，它不是我的web应用程序的一部分。我只是想测试一下我的angular代码是否得到了数据，然后循环通过它

{{x}


var-app=angular.module（'myApp'，[]）；
app.controller（'customersCtrl'，函数（$scope，$http）{
$http.get（“http://localhost:8080/abc/runlist")
.success（函数（响应）{$scope.names=response.records；}）；
});
溜溜球

为什么它不起作用？我在春天遇到了一个需要实现CORS的东西。我这样做了，但仍然没有任何回报：

@组件
公共类SimpleCORSFilter实现过滤器{
public void doFilter（ServletRequest-req、ServletResponse-res、FilterChain
链）抛出IOException、ServletException{
HttpServletResponse=（HttpServletResponse）res；
response.setHeader（“访问控制允许原点“，“*”）；
setHeader（“访问控制允许方法”、“POST、GET、选项、，
删除“）；
setHeader（“访问控制最大年龄”，“3600”）；
response.setHeader（“访问控制允许标头”、“x请求的with”）；
链式过滤器（要求、恢复）；
}
public void init（FilterConfig FilterConfig）{}
public void destroy（）{}
}

很可能是因为您使用了

文件：//

方案。有关推理，请参见链接问题的中间项目符号。基本上，对于

文件：//

请求，您的源代码将为null，这会导致

XmlHttpRequest

失败，而

$http

依赖于此。

尝试将return放在$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>

---

明白了！有两个修复程序：

首先，我必须实现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复制了上面的简单示例，W3Schools是一个很棒的教程网站：

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

注意响应末尾的.记录。这是不必要的。当我把它取下来时，它起作用了。

试试下面的方法：

js:

html:

{{x}

更多参数html：

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

{{x.myName}
{{x.myNumber}

希望我能帮上忙。

试试这个：

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

---

希望它能起作用。：）

你犯了什么错误？您是否尝试使用$resource而不是$http？如果您使用console.log（response），其中是否有任何内容？您只需导航到

http://localhost:8080/abc/runlist

使用您的浏览器。如果返回数据，则它是您的前端，否则是后端。哪一个？我在浏览器中获取数据。前端才是问题所在。我还尝试了$resource。它没有解释角括号，只是逐字打印出来：{{x.stock_num}}}你试过了，什么也没有返回。也没有收到任何错误：（您是否能够在成功回调中console.log数据？

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

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

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