时间戳

首页 > 解决方案 > Angularjs 无法从 REST API 获取 json 数据

angularjs - Angularjs 无法从 REST API 获取 json 数据

问题描述

我需要创建一个以 laravel 作为后端和 angularjs 作为前端的待办事项列表。我是这个领域的新手。我确信我的后端返回了正确的 json 数据（由 Postman 检查），但为什么 angularjs 没有从中得到任何东西？我是这个领域的新手。请帮我！

在我的前端，我有两个文件：todoapp.js 和 index.html。

todoapp.js：

var app = angular.module('todoapp', []);

app.controller('appCtrl', function($scope, $http) {
    $scope.name = "John";
    $scope.todoList = {}

    $http.get('http://localhost/201805CodeTesting/backend/public/api/todos')
        .success(function (data, status, header, config){
            $scope.todoList = data;
    });


    $scope.deleteTask = function(id) {
        $http.delete('http://localhost/201805CodeTesting/backend/public/api/todos/' + id).
            success(function(data, status, headers, config) {
               $scope.ServerResponse = id;
            });
    };

    $scope.addTask =  function() {
        var data = $.param({
            taskName: $scope.taskName,
        });

        var config = {
            headers : {
                'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;'
            }
        }
        $http.post('http://localhost/201805CodeTesting/backend/public/api/todos', data, config)
            .success(function (data, status, headers, config) {
                $scope.PostDataResponse = data;
            })
    };
});

索引.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <script src="./js/todoapp.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <title>Todo List App</title>
</head>
<body class="container" ng-app="todoapp" ng-controller="appCtrl"> <div class="col-md-8 col-md-offset-2">

    <div class="page-header">
        <h1>TODO List</h1>
    </div>

    <form ng-submit="addTask()">

        <div class="form-group">
            <input type="text" class="form-control input-lg" name="taskName" ng-model="taskName" placeholder="Enter task name">
        </div>

        <div class="form-group text-right">
            <button type="submit" class="btn btn-primary btn-lg">Add</button>
        </div>
    </form>

    <ul>
        <li ng-repeat="task in todoList">
            {{ task.id  +  ', ' + task.task + ', ' + task.status }} <br>
            <form ng-submit="deleteTask()">
                <input type="hidden" name='_method' value='DELETE'>
                <input type="submit" class = 'btn btn-danger' value="Submit" />
            </form>
        </li>
    </ul>

</div>

</body>
</html>

标签： angularjslaravel

解决方案

尝试像角度所说的那样调用 $http （记住它返回一个承诺）

$http.get('/someUrl', config).**then**(successCallback, errorCallback);

检查then方法。

更多示例在https://docs.angularjs.org/api/ng/service/ $http

如果您发布控制台错误、日志或您拥有的任何内容，将会很有帮助。

推荐阅读