Question

我第一次尝试使用AngularJS。我从http-get请求获取实现用户JSON数据，但该对象返回null。我使用chrome测试了我的服务，我得到了这个结果：

[{＆＃34; ID＆＃34;：1，＆＃34;电子邮件＆＃34;：＆＃34; walid@gmail.com"，＆＃34;名称＆＃34;：＆＃34 ;瓦利德＆＃34;}]

在我的js文件下面：

var app = angular.module("userApp", []);
app.controller("userController", function($scope, $http) {
$scope.user = null;
$scope.name = null;

$scope.getUser = function() {
    $http({
        method : 'GET',
        url : '/all',
    }).success(function(data) {
        $scope.user = json.stringify(data);
    }).error(function(data) {
        alert('Fail: user is  '+data);

        });
    }
});

我的HTML：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>SIM Card</title>
<link rel="Stylesheet" type="text/css"
href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
<link rel="Stylesheet" type="text/css" href="css/simcard.css">
<script type="text/javascript" src="angular/angular.min.js"></script>
<script type="text/javascript" src="js/simcard2.js"></script>
<script type="text/javascript" src="js/json2.js"></script>
</head>
<body ng-app="userApp" ng-controller="userController">

<div class="col-md-12 col-sm-12 col-xs-12">
    <div class="panel panel-info spacer">
        <div class="panel-heading">User Management</div>
        <div class="panel-body">
            <form action="">
                <div class="form-group">
                    <label>ID</label> <input type="text" ng-model="email">
                    <button ng-click="getUser()" type="submit">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
    <div class="panel panel-info spacer">
        <div class="panel-heading">Result</div>
        <div class="panel-body">
            <div class="form-group">
                <label>Name: </label>
                <label>{{user.name}}</label>
            </div>
        </div>
    </div>
</div>
</body>
</html>

我可以根据需要发送整个maven项目。谢谢你的帮助。

此致瓦利德

Answer 1

你可以这样做：

var app = angular.module("userApp", []);
app.controller("userController", function($scope, $http) {
    $scope.getUser = function() {
       return $http.get('/all').then(
            function successCallback(response) {
                // you can log response here to see what it is
                // or you can simply check network in your browser DevTools
                $scope.users = response;
            },
            function errorCallback(response) {
                alert('There was error retrieving users List');
            }
        );
    };
});

根据您的响应（即阵列）完成后，您可以在视图中重复此操作。 ngRepeat也在关注您的模型更新，因此每次更新$scope.users时，它都会自动更新。

因此，您只需在视图：

中使用此功能即可

<div ng-app="userApp" ng-controller="userController">
    <ul>
        <li ng-repeat="user in users">
           <span> {{user.id}} {{user.name}} {{user.email}} </span>
        </li>
    </ul>
</div>

使用$http.get(...).then()的好处是，您可以轻松地使用保证链来构建其他服务。在您的情况下，您必须确保检查您的回复。

//更新：

这是一个Bin，您可以在其中看到上面的代码：https://jsbin.com/luguzu/1/edit

输出点击使用js运行，然后点击 获取用户 。

Answer 2

问题在于您的请求配置： http://plnkr.co/edit/qEkpUAXQQZmO9iUAZ2aX?p=preview

它不知道您期望响应的数据类型。

您的http请求应如下所示：

 $http.get("test.json").success(function(data) {
    $scope.user = data[0];
}).error(function(data) {
    alert('Fail: user is 2 '+data);
});

<强>更新：

刚刚注意到HTML中的某些内容 - 您的表单中有一个操作为空的表单。这是请求被取消的原因。在angularjs中有一个表单，它应该添加到div ng-form="myForm"，输入可以只是简单的按钮，而不是提交，它将正常工作。

Answer 3

这是我的网络控制台的图像...... enter image description here

restful angularjs $ http get return null

3 个答案: