Question

我正在尝试使用AngularJS将http发布到数据库中。我的代码没有显示任何错误，但我的数据库没有更新，我无法弄清楚原因。这是我的代码：

//主题-service.js

  (function() {
        'use strict';
        angular.module('topic').factory('topicService', topicServiceFunction);
        topicServiceFunction.$inject = [ '$http', '$q' ];
        function topicServiceFunction($http, $q) {
            var topicService = {
                getTopics : getTopics

            }
            return topicService;

            function getTopics(obj) {
                console.log('-->topicServiceFunction');
                console.log(obj.name);
                var deferred = $q.defer();
                return $http.post('http://localhost:8080/restapp/api/topic',
                        JSON.stringify(obj)).then(function(response) {
                    if (typeof response.data === 'object') {
                        return response.data;
                    } else {
                        return deferred.reject(response.data);
                    }
                }, function(response) {
                    return deferred.reject(response.data);
                });

            }

        }

    }())

//主题-controller.js

 (function() {
        'use strict';
        angular.module('topic').controller('topicController',
                topicControllerFunction);
        topicControllerFunction.$inject = [ '$scope', 'topicService' ];
        function topicControllerFunction($scope, topicService) {
            $scope.getTopics = getTopics;
            function getTopics(topicId,name,description,categId,userId) {
                 console.log('-->topictrlFunction');
                $scope.topics = [];

                var obj={
        id:$scope.topicId,
        name:$scope.name,
        description:$scope.description,
        id_category:$scope.categId,
        user_id:$scope.userId

        }
        var promise = topicService.getTopics(obj);
                promise.then(function(data) {
                    if (data != undefined && data != null) {
                        $scope.topics = data;
                    } else {
                        $scope.topics = undefined;
                    }
                }, function(error) {
                    console.log('error=' + error);
                    $scope.topics = undefined;
                })
                topicService.getTopics(obj);
                $scope.topics = topicService.getTopics(obj);
            }

        }
    }())

// topic.html

 <!DOCTYPE html>
    <html lang="en" ng-app="myTopics">
    <head>
    <meta charset="UTF-8">
    <script src="../../../bower_components/angular/angular.js"></script>
    <script src="app.js"></script>
    <script src="topics/module/topic-module.js"></script>
    <script src="topics/controller/topic-controller.js"></script>
    <script src="topics/service/topic-service.js"></script>
    <title>Topics</title>
    </head>
    <body>

        <div ng-controller="topicController">
            <div ng-controller="topicController">
                <p>
                    Topic id: <input type="text" ng-model="topicId">
                </p>
                <p>
                    Name: <input type="text" ng-model="name">
                </p>
                <p>
                    Description: <input type="text" ng-model="description">
                </p>
                <p>
                    Id category: <input type="text" ng-model="categId">
                </p>
                <p>
                    User id: <input type="text" ng-model="userId">
                </p>
                <button ng-click="getTopics(topicId,name,description,categId,userId)">Add
                    topic</button>
                <ul ng-repeat="topic in topics">
                    <li>{{topic.id}} --{{topic.name}} -- {{topic.description}} --
                        {{topic.id_category}}--{{topic.user_id}}</li>
                </ul>

            </div>
    </body>
    </html>

Answer 1

在你的服务中你使用$ q但是返回$ http承诺，这会产生反效果，只是返回延期承诺：

function getTopics(obj) {

      console.log('-->topicServiceFunction');
      console.log(obj.name);

      var deferred = $q.defer();
      var data = JSON.stringify(obj)

      $http.post('http://localhost:8080/restapp/api/topic', data)
          .then(function(response) {
              if (typeof response.data === 'object') {
                  deferred.resolve(response.data);
              } else {
                  deferred.reject(response.data);
              }
           })
           .catch(function(response) {
              return deferred.reject(response.data);
           });

    return deferred.promise;

 }

如果它仍然无效，你应该尝试发送urlencoded数据而不是json：

只需在您的请求中添加此标头：headers : {'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8'}

并使用$httpParamSerializerJQLike服务对数据进行编码。（在您的服务中注入）

function getTopics(obj) {

      console.log('-->topicServiceFunction');
      console.log(obj.name);

      var deferred = $q.defer();
      var data = $httpParamSerializerJQLike(obj);
      var config = {
         headers : {'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8'}
      };

      $http.post('http://localhost:8080/restapp/api/topic', data, config)
          .then(function(response) {
              if (typeof response.data === 'object') {
                  deferred.resolve(response.data);
              } else {
                  deferred.reject(response.data);
              }
           })
           .catch(function(response) {
              return deferred.reject(response.data);
           });

    return deferred.promise;

 }

AngularJS Http Post方法不起作用

1 个答案: