AngularJS $http POST请求无法向RESTful API发送数据求助

问题排查与修复步骤 #

1. 移除函数参数中的$http，避免覆盖注入的服务 #

你的account_save函数定义里写了function($http)，这会把Angular注入的$http服务覆盖成undefined（调用方法时不会传入$http参数），直接导致内部的$http调用失效。

修复代码：

$scope.account_save = function() { // 去掉$http参数
    // ... 原有代码
};

2. 修正this指向问题，确保能正确获取accounts数据 #

在$scope的方法里，this默认指向$scope而非控制器实例，所以this.accounts无法拿到你在控制器里定义的accounts对象。

两种修复方式：

• 方式一：将控制器内的this.accounts改为$scope.accounts，后续直接用$scope.accounts访问：

  // 控制器内定义
  $scope.accounts = { code:"", account_name:"", description:"", account_type_id:"", is_active:"", user_id:"", owner_id:""};
  
  // 在save方法里
  $scope.account_save = function() {
      $scope.accounts.is_active = 1;
      console.log($scope.accounts);
      // ... 后续请求用$scope.accounts
  };
  

• 方式二：提前保存控制器实例的this，避免指向混乱：

  var vm = this; // 保存控制器实例的this
  vm.accounts = { code:"", account_name:"", description:"", account_type_id:"", is_active:"", user_id:"", owner_id:""};
  
  $scope.account_save = function() {
      vm.accounts.is_active = 1;
      console.log(vm.accounts);
      // ... 后续请求用vm.accounts
  };
  

3. 移除冗余的数据包裹，确保API能解析请求体 #

你当前的请求数据是{'message' : this.accounts}，如果RESTful API期望直接接收code、account_name等字段，而非嵌套在message对象里，会导致API无法正确读取数据。

修复：直接传递accounts对象

$http({
    url: base_api_url+"/accounts",
    method: "POST",
    headers: headers,
    data: vm.accounts, // 或者$scope.accounts，根据上面的修复选择
    paramSerializer: '$httpParamSerializerJQLike'
})

4. 确保注入$httpParamSerializerJQLike服务 #

如果使用$httpParamSerializerJQLike作为序列化器，需要在控制器的依赖注入里添加这个服务，否则会出现未定义错误：

修复后的控制器注入：

app.controller ('accountsCtrl', function($scope, $http, $httpParamSerializerJQLike) {
    // ... 原有代码
});

完整修复后的代码示例 #

app.controller ('accountsCtrl', function($scope, $http, $httpParamSerializerJQLike) {
    // 用vm保存控制器实例，避免this指向问题
    var vm = this;
    vm.accounts = { code:"", account_name:"", description:"", account_type_id:"", is_active:"", user_id:"", owner_id:""};

    $scope.addPage = "#!/account";
    $scope.uploadPage = "upload.html";
    $scope.exportPage = "export.html";

    let user_token = local_store("get", "primalfitsUser").token;

    let headers = {
        "Content-Type":'application/x-www-form-urlencoded;charset=utf-8;',
        "Authorization":"Bearer "+user_token
    };

    $scope.account_save = function() {
        vm.accounts.is_active = 1;
        console.log(vm.accounts);

        $http({
            url: base_api_url+"/accounts",
            method: "POST",
            headers: headers,
            data: vm.accounts,
            paramSerializer: '$httpParamSerializerJQLike'
        }).then((result) =>{
            $scope.info = result.data.message;
        }, function(error){
            $scope.error = error;
            console.error("请求失败：", error); // 增加错误日志方便排查
        });
    };
});

内容的提问来源于stack exchange，提问作者phenomT