AngularJS $资源如何发送更新的数据?

时间:2016-11-04 19:17:38

标签: php angularjs rest ngresource

我刚开始尝试学习AngularJS,并试图让一个简单的应用程序正常工作,只显示和更新MySQL数据库中的项目。

我有一个处理来自应用程序请求的PHP rest API。

到目前为止,API成功地以JSON编码的数组传回数据库中的所有项目。它还会传回一条记录,但我无法更新记录。

当我点击表单上的“保存”按钮时,我无法看到更改的数据如何从应用程序传递到API。它应该作为$ _POST变量传递吗?

这是我在我的应用程序中的JS代码:

angular.module('starter.services', []).factory('List', function ($resource) {
    return $resource('http://example.com/restAPI/:id', { id: '@id' }, {
        update: {
            method: 'PUT'
        }
    });
});

angular.module('starter', ['ionic', 'ngResource', 'starter.controllers', 'starter.services'])
.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider

    .state('list', {
        url: '/',
        templateUrl: 'templates/list.html',
        controller: 'ListController'
    })

    .state('editItem', {
        url: '/items/:id/edit',
        templateUrl: 'templates/item-edit.html',
        controller: 'EditController'
    })

    $urlRouterProvider.otherwise('/');
});

angular.module('starter.controllers', [])
.controller('ListController', function ($scope, $state, $stateParams, List) {
    $scope.items = List.query();
})

.controller('EditController', function ($scope, $state, $stateParams, List) {
    $scope.updateItem=function(){
        $scope.item.$update(function(){
            $state.go('list');
        });
    };

    $scope.loadItem=function(){
        $scope.item=List.get({id:$stateParams.id});
    };

    $scope.loadItem();
});

以下是表单代码:

<form class="form-horizontal" role="form" ng-submit="updateItem()">
<div class="form-group">
    <label for="title" class="col-sm-2 control-label">Title</label>
    <div class="col-sm-10">
        <input type="text" ng-model="item.title" class="form-control" id="title" placeholder="Title Here"/>
    </div>
</div>

<div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
        <input type="submit" class="btn btn-primary" value="Save"/>
    </div>
</div>
</form>

当应用加载时,初始状态为“list”,数据库中的所有项目都显示在页面上。

列表中的每个项目都有一个编辑按钮。单击编辑按钮时,状态将更改为“editItem”,新页面将加载单个项目。到目前为止,非常好。

当我对数据进行更改并点击“保存”按钮时,将使用ng-submit="updateItem()"调用函数updateItem。

这会调用API,但我无法看到它如何传递更新的数据。当我在API中尝试error_log($_POST["title"]);时,我会在错误日志中看到“PHP Notice:Undefined index:title”。如何访问API中已更改的数据以便更新数据库?

这是我正在使用的.htaccess - 这可能是个问题吗?这是我在网上找到的,所以我对它的运作方式知之甚少。

<IfModule mod_rewrite.c>
RewriteEngine On

RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-s
RewriteRule ^(.*)$ api.php?id=$1 [QSA,NC,L]

RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^(.*)$ api.php [QSA,NC,L]

RewriteCond %{REQUEST_FILENAME} -s
RewriteRule ^(.*)$ api.php [QSA,NC,L]
</IfModule>

1 个答案:

答案 0 :(得分:1)

感谢回复人员。

@georgeawg - 你让我走上了正确的道路。我之前只使用过GET和POST,而更新方法正如你所指出的那样使用PUT。

一旦我意识到这一点,我在这里找到答案...... REST request data can't be read in 'put' method

这段代码对我有用....

$data = json_decode(file_get_contents("php://input"), true);
error_log($data['title']);