無法在AngularJS中發布數據

Question

我正在構建一個小型應用程序，用於從一個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數據的痕跡，未發送任何數據。

Answer 1

我不知道您要通過發布到.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);
    };
});

Answer 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);
            });

Answer 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})
})