unable to get proper data with AngularJS post method

Question

this is my 1st time with AngulerJS. I'm trying to POST data to the server.

AngularJS Code

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

});

This code is posting data to the server, but with something wired format. Below is my print_r($_POST); result :

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

this is wrong result, I am expecting something like

Array
(
    user_id => 3
)

Note : I'm using CodeIgniter framework at server side.

@MayankVadiya what if I want to send multiple key:value ? and Files as well — AkshayP
– AkshayP, Commented Mar 26, 2016 at 7:15

score 1 · Accepted Answer · 2016-03-26 09:47:25Z

You can send your post data in json:

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

And in the server side you can get the post data like this:

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

You have to encode your data in the post body in urlencoded format when the request content type is application/x-www-form-urlencoded`. Which should be like this:

var inputs = 'student_id=3';

Community · Accepted Answer · 2020-06-20 09:12:55Z

Though it is not the right practice to write answer of old question but I want to post this answer so that others can take help whenever they required.

Firstly, understand the reason why such thing is happening. The reason is, AngularJS doesn’t serialize the data ( parameters ) passed to the POST request automatically. Therefore we have to serialize the data with$httpParamSerializerJQLike which is available as AngularJS Service . Also the default content-type of the posted data is application/json. Therefore we need to override the Content-type headers of the post request to application/x-www-form-urlencoded in order to access the the posted values via $_POST.

Now in angular there is also provided $httpParamSerializer service but the difference $httpParamSerializerJQLike is something object also containing another object so if former is used, then internal object won't be serialized i.e. all nested objects won't be serialized with $httpParamSerializer but it is not the case with $httpParamSerializerJQLike.

You can check the difference here: AngularJS $httpParamSerializer service DOC

Now, rather than json encode and decode data in php, we can do that in Angular JS itself by using $httpParamSerializerJQLike service in angular JS in this way:

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

And in codeigniter you can get that posted data by normal syntax i.e. $this->input->post('user_id');

For more information...you can refer the above link mentioned...

Hope it might help you....

Collectives™ on Stack Overflow

unable to get proper data with AngularJS post method

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related