javascript 本地主机不起作用的简单 angularJS GET 函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30464820/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Simple angularJS GET function with localhost not working
提问by logixplayer
I have a very simple Spring Rest backend that returns JSON data. The restful URL is working in my browser like this:
我有一个非常简单的 Spring Rest 后端，它返回 JSON 数据。Restful URL 在我的浏览器中是这样工作的：
http://localhost:8080/abc/runlist
http://localhost:8080/abc/runlist
It returns data like so:
它返回这样的数据：
[
{"stock_num":"KOH19","damage":"Toronto (Oshawa)"},
{"stock_num":"AZ235","damage":"Toronto (Oshawa)"},
...
]
I have an independent html page that is not part of my web app. I just want to test to see if my angular code is getting the data and then looping through it.
我有一个独立的 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>
</html>
Why is it not working? I came across something in Spring where you need to implement something called CORS. I did that like so but still nothing returned:
为什么它不起作用？我在 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() {}
}
回答by AndreaM16
Try something like:
尝试类似：
js:
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:
html：
<ul>
<li ng-repeat="x in records">
{{x}}
</li>
</ul>
more params html:
更多参数html：
<ul>
<li ng-repeat="x in records">
{{x.myName}}
{{x.myNumber}}
</li>
</ul>
Hope I've been helpfull.
希望我有所帮助。
回答by Grant
Try putting return in front of your $http.get
尝试将 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>
then in your view use the dot notation to refer to the properties you want to display e.g.
然后在您的视图中使用点符号来引用您要显示的属性，例如
{{x.stock_num}}
回答by logixplayer
Got it! There were 2 fixes:
知道了！有 2 个修复：
Firstly I had to implement the CORS filter and class in order not get this error:
首先，我必须实现 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)
Secondly, a warning for example copiers! I had copied the simple example above from W3Schools, a great tutorial site as such:
其次，警告例如复印机！我从 W3Schools 复制了上面的简单示例，这是一个很棒的教程站点：
$http.get("http://localhost:8080/abc/runlist")
.success(function (response) {$scope.names = response.records;});
Note the .records at the end of response. This was not needed. When I took it off, it worked.
请注意响应末尾的 .records。这是不需要的。当我取下它时，它起作用了。
回答by Dave
More than likely it's being caused by your use of the file://scheme. See the middle bullet on the linked question herefor reasoning. Basically your origin is going to be null for file://requests, which causes XmlHttpRequestto fail, which $httprelies on.
它很可能是由您使用该file://计划引起的。请参阅此处链接问题的中间项目符号以进行推理。基本上，您的file://请求的来源将为空，这会导致XmlHttpRequest失败，这$http依赖于。
回答by manpreet singh bhinder
try this:
试试这个：
$http.get("http://localhost:8080/abc/runlist")
.success(function (response, data, headers, status, config) {
$scope.names = response.names;
});
hope it will work. :)
希望它会起作用。:)
