无法使用 AngularJS post 方法获取正确的数据

Question

这是我第一次使用 AngulerJS。我正在尝试 POST 数据到服务器。

AngularJS代码

 var app = angular.module("myApp", []);
var BASE_URL = "http://localhost/project/api/Data/";

var GET_DATA = BASE_URL+"get_data";
console.log(GET_DATA);
app.controller('myCtrl', function($scope, $http) {
var inputs = { "user_id": "3"};
var config = {
              headers : {
                  'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;'
              }
          }
$http.post(GET_DATA , inputs, config)
          .success(function (response, status, headers, config) {
              $scope.content = response.error;
              $scope.statuscode = response.status;
              $scope.statustext = response.statusInfo;
              console.log(response);    
          })
          .error(function (data, status, header, config) {
              $scope.ResponseDetails = "Data: " + data +
                  "<hr />status: " + status +
                  "<hr />headers: " + header +
                  "<hr />config: " + config;
          });

});

此代码正在向服务器发送数据，但使用的是有线格式。下面是我的 print_r($_POST); 结果：

Array
(
    [{"user_id":"3"}] => 
    [0] => 
)

这是错误的结果，我期待这样的结果

Array
(
    user_id => 3
)

注意：我在服务器端使用 CodeIgniter 框架。

Answer 1

您可以在 json 中发送您的 post 数据：

$http.post(GET_DATA , {"user_id": "3"})
      .success(function (response, status, headers, config) {
          $scope.content = response.error;
          $scope.statuscode = response.status;
          $scope.statustext = response.statusInfo;
          console.log(response);    
       })
      .error(function (data, status, header, config) {
          $scope.ResponseDetails = "Data: " + data +
             "<hr />status: " + status +
             "<hr />headers: " + header +
             "<hr />config: " + config;
       });
});

而在服务器端，您可以像这样获取 post 数据：

$postdata = json_decode(file_get_contents('php://input'));
print_r($postdata);

当请求内容类型为 application/x-www-form-urlencoded 时，您必须以 urlencoded 格式对 post 正文中的数据进行编码。应该是这样的：

var inputs = 'student_id=3';

Answer 2

虽然写旧问题的答案不是正确的做法，但我想post这个答案，以便其他人在需要时可以得到帮助。

首先要弄清楚为什么会出现这种情况。原因是，AngularJS 不会自动序列化传递给 POST 请求的数据（参数）。因此，我们必须使用 $httpParamSerializerJQLike 序列化数据，它可作为 AngularJS 服务使用。此外，posted 数据的默认 content-type 是 application/json。因此，我们需要将 post 请求的 Content-type headers 覆盖为 application/x-www-form-urlencoded 以便通过 $_[=50= 访问 posted 值].

现在 angular 也提供了 $httpParamSerializer 服务，但是区别 $httpParamSerializerJQLike 是 object 还包含另一个 object 所以如果使用前者，那么内部 object 将不会被序列化，即所有嵌套的 object 都不会被 $httpParamSerializer 序列化，但 $httpParamSerializerJQLike.[=21= 则不会。 ]

您可以在此处查看差异：AngularJS $httpParamSerializer service DOC

现在，不用 json 在 php 中编码和解码数据，我们可以在 Angular JS 本身中使用 $httpParamSerializerJQLike 服务在 angular JS是这样的：

$http({
        url: myUrl,   //post your url here
        method: 'POST',
        data: $httpParamSerializerJQLike({ 'user_id': '3'}),
       headers: {
       'Content-Type': 'application/x-www-form-urlencoded'
       }
      });

并且在 codeigniter 中，您可以通过正常语法获取 posted 数据，即 $this->input->post('user_id');

更多信息...可以参考上面link提到的...

希望对您有所帮助....

无法使用 AngularJS post 方法获取正确的数据

unable to get proper data with AngularJS post method

php

jquery

codeigniter

http-post

angularjs