简单的angularJS GET函数与localhost不工作

Simple angularJS GET function with localhost not working

本文关键字：localhost 工作 函数 angularJS GET 简单      更新时间：2023-09-26

我有一个非常简单的Spring Rest后端，返回JSON数据。restful URL在我的浏览器中是这样工作的:

http://localhost:8080/abc/runlist

返回如下数据:

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

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

<!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>
</html>

为什么不工作?我在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() {}
}

试试这样写:

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>

希望我对你有所帮助。

尝试将return放在$http的前面。得到

<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}}

明白了!有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。这是不必要的。当我把它取下来时，它工作了。

很可能是由于使用file://方案引起的。请参阅链接问题的中间部分进行推理。基本上，对于file://请求，您的原点将为空，这将导致XmlHttpRequest失败，$http依赖于此。

try this:

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

希望它会起作用。:)

相关文章：