无法在 AngularJS 中发布数据答案

【问题标题】：Unable to POST data in AngularJS无法在 AngularJS 中发布数据
【发布时间】：2018-08-02 20:23:39
【问题描述】：

我正在构建一个小型应用程序，用于从一个 JSON 文件中获取数据并将其发布到另一个 JSON 文件中。我正在使用 AngularJS 和 ngResource 和 $http 服务来实现该功能。

我能够使用 GET 方法读取数据，但 POST 没有将数据发布到我的另一个 JSON 文件。

以下是我的控制器和服务定义：

'use strict';

/* Controllers */

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

boookbAppControllers.controller('boookbAppCtrl', ['$scope','$http','Book',
  function($scope,$http,Book) {

    $scope.way=["Normal","$http","RestFul"]



    $http.get('data/books.json').success(function(data) {
    $scope.b1 = data;

    $scope.addBook1=function(){ 


        $http.post('data/newbooks.json',{ "catalogRefIds" : $scope.books[0].title,   "productId" : $scope.books[0].author}).then(function(response,status){
        $scope.a=status;
        alert($scope.a);

        });
    } 

    $scope.b2 = Book.query();


    $scope.newBookName="";
    $scope.userBook="";
    $scope.userBookAuthor="";
    $scope.newBookAuthor="";
    $scope.bookData={};

    $scope.addBook=function(){
    $scope.userBook=$scope.newBookName;
    $scope.userBookAuthor=$scope.newBookAuthor; 

    Book.add({},$scope.bookData);

    }
  });
  }]);


'use strict';

/* Services */

var boookbAppServices = angular.module('boookbAppServices', ['ngResource']);

boookbAppServices.factory('Book', ['$resource',
  function($resource){
    return $resource('data/:bookId.json', {}, {
      query: {method:'GET', params:{bookId:'books'}, isArray:true},
      add: {method:'POST',params:{bookId:'books'},isArray: true}    
    });
  }]);

我检查了POST 数据的痕迹，但没有发送任何数据。

【问题讨论】：

你不能简单地POST 到一个文件。您需要某种可以处理此问题的服务器端脚本。您的后端设置是什么样的？
你可能属于这种情况：stackoverflow.com/q/19618010

标签： javascript html angularjs angularjs-directive

【解决方案1】：

我不知道你想通过 POST 到 .json 文件来做什么。话虽如此，假设您实际上是在处理 POST 请求服务器端并且没有看到任何数据，这很可能是问题所在：

例如，Angular 以不同于 jQuery 的方式发布数据 - 它以 application/json 而不是 application/x-www-form-urlencoded 发送数据。因此，例如在 PHP 中，如果您检查 $_POST['key'] 它不会找到它。您的选择要么是在服务器端处理它：

$_JSON = file_get_contents("php://input");
$_JSON = json_decode($_JSON, TRUE);
echo $_JSON['key'];

或者您可以将其转换为客户端的表单数据：

boookbAppControllers.config(function($httpProvider) {
    $httpProvider.defaults.headers.post  = {'Content-Type': 'application/x-www-form-urlencoded'};
    $httpProvider.defaults.transformRequest = function(data) {
      if (data === undefined) return data;
      var clonedData = clone(data);
      for (var property in clonedData)
         //you could do this with hasOwnProperty probably,
         //but this works unless you prepend variable keys
         //with $
         if (property.substr(0, 1) == '$')
           delete clonedData[property];

      return $.param(clonedData);
    };
});

【讨论】：

【解决方案2】：

请看一下 $http.post 语法：我们需要通过封装实际数据的关键字 data 传递数据。

    $http.post('data/newbooks.json', data : { "catalogRefIds" : $scope.books[0].title,   "productId" : $scope.books[0].author}).then(function(response,status){
            $scope.a=status;
            alert($scope.a);
            });

【讨论】：

【解决方案3】：

在发布 JSON 数据时，使用 Content-Type 作为 text/plain，在 Angular 1.5.11 中进行了尝试和测试

$http({
  method : 'POST',
  url : 'http://example.com',
  headers: {
    'Content-Type': 'text/plain',
  },
  data : JSON.stringify({data})
})

【讨论】：