我试图从mysql，h2，derby数据库中获取数据，但没有任何效果。我完全按照w2schools网站上给出的方式尝试。但后来我想我会尝试使用数组函数，并在我的 AngularJS 页面中检查 Java JSP 页面调用它。
以下是索引.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f1f1f1;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
<script src="angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<table>
<tr ng-repeat="x in names">
<td>{{ x.Name }}</td>
</tr>
</table>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("http://localhost:8080/pavanjsp/jsondata.jsp")
.then(function (response) {$scope.names = response.data.records;});
});
</script>
</body>
</html>
这是我的jsondata.jsp下面：
<%@ page contentType="text/html; charset=iso-8859-1" language="java" %>
<html>
<head>
<title>JSON Data</title>
<link rel="stylesheet" href="dist/css/bootstrap.css" />
</head>
<body>
<div class="container-fluid">
<%
String[] names = { "Alfreds Futterkiste", "B's Beverages", "Berglunds snabbköp", "Blondel père et fils", "Bólido Comidas preparadas", "Bon app'", "Comércio Mineiro" };
response.addHeader("Access-Control-Allow-Origin", "*");
%>
<%
out.print("{ '"records'":[ ");
for(int i = 0; i < names.length; i++)
{
if(i == (names.length - 1))
out.print("{'"Name'":'"" + names[i] + "'"}");
else
out.print("{'"Name'":'"" + names[i] + "'"}, ");
}
out.print(" ] }");
%>
</div>
</body>
</html>
我甚至尝试将索引.html作为索引.jsp并在 tomcat 中部署。但不起作用。甚至我已经尝试过但不起作用的 php 代码。
请帮帮我。
好的，我得到了自己的答案，感谢青色的帮助。问题出在响应上，更新的代码如下：
jsaondata.jsp（托管在Tomcat上）
<%@ page contentType="application/json; charset=iso-8859-1" language="java" %>
<%
String[] names = { "Alfreds Futterkiste", "B's Beverages", "Berglunds snabbköp", "Blondel père et fils", "Bólido Comidas preparadas", "Bon app'", "Comércio Mineiro" };
response.addHeader("Access-Control-Allow-Origin", "*");
%>
<%
out.write("{ '"records'":[ ");
for(int i = 0; i < names.length; i++)
{
if(i == (names.length - 1))
out.write("{'"Name'":'"" + names[i] + "'"}");
else
out.write("{'"Name'":'"" + names[i] + "'"}, ");
}
out.write(" ] }");
%>
角度数据.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f1f1f1;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
<script src="angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<table>
<tr ng-repeat="x in names">
<td>{{ x.Name }}</td>
</tr>
</table>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("http://localhost:8080/pavanjsp/jsondata.jsp")
.then(function (response) {$scope.names = response.data.records;});
});
</script>
</body>
</html>
尝试将代码更改为：
$scope.names = JSON.parse(response.data).records;
如果这不起作用，请调试是否从服务器收到正确的 json。打开一些Firebug/开发人员工具（通常是f12）并查看网络。
打开页面并查看响应。复制它并粘贴到某个 json 验证工具。如果JSON是正确的，那么角度应用程序中有问题，但我看到一切都很好。
此外，请检查此调用中的 firebug（如果配置了正确的 CORS）。如果您收到结果 200 ok，那就没问题了。
您还可以使用$log服务来调试结果：
app.controller('customersCtrl', function($scope, $http,$log)
.then(function (response) {$log.debug('response',response);
我希望它有所帮助。