Angular $http not posting

Question

I have a piece of angular code which doesn't seem to be posting. To be honest firefox shows the posting parameters but when I do a print_r($_POST) in my server and view the response through firefox I am shown an empty array.

Below is the piece of the code.

$http({
            method: 'POST',
            data : { slotid : slotid },
            url: "https://mydomain.abc/Api/reserve_slot/" + slotid + "/" + $scope.docid,
            headers: {'Content-Type': 'application/x-www-form-urlencoded'}
        }).then(function successCallback(response) {    
            $scope.r = response.data.list;
            console.log($scope.r);
            if($scope.r.status == 1){

                $scope.hide();
                $state.go('booking', { slotid: slotid });
            }

        });

The url is being called. Because the if I append the variables/values to be passed through the URL they work (well obviously). I just don't why the post isn't working.

I have tested and data : { slotid : slotid }, has values in slotid.

Any ideas?

-----Edit Below is the full controller code.

.controller('doctorCtrl', ['$scope', '$stateParams', '$http', '$ionicLoading', '$state', // The following is the constructor function for this page's controller. See https://docs.angularjs.org/guide/controller
// You can include any angular dependencies as parameters for this function
// TIP: Access Route Parameters for your page via $stateParams.parameterName
function ($scope, $stateParams, $http, $ionicLoading, $state ) {
    $scope.docid = $stateParams.docid;
    $scope.show = function() {
        $ionicLoading.show({
            content: 'Loading',
            showBackdrop: false,
            animation: 'fade-in',
        }).then(function(){
           console.log("The loading indicator is now displayed");
        });
      };
     $scope.hide = function(){
        $ionicLoading.hide().then(function(){
           console.log("The loading indicator is now hidden");
        });
      };
    $scope.show();
    $http({
        method: 'POST',
        url: "https://mydomain.abc/Api/docinfo",
        data : { docid : $scope.docid },
        headers: {'Content-Type': 'application/x-www-form-urlencoded'}
    }).then(function successCallback(response) {    
        $scope.docinfo = response.data.info;
        console.log($scope.docinfo);
        $scope.loadslots($scope.docid,0);
        //return response.data.list;
    });
    $scope.loadslots = function(docid,dinaya){
        $http({
            method: 'GET',
            url: "https://mydomain.abc/Api/get_slots/" + docid + "/" + dinaya,
            headers: {'Content-Type': 'application/x-www-form-urlencoded'}
        }).then(function successCallback(response) {    
            $scope.slots = response.data.list;
            console.log($scope.slots);
            $scope.hide();
        });
    }
    $scope.showslot = function(slotid){
        $scope.show();
        //data: $.param({slotid: slotid})

        $http({
            method: 'POST',
            //data : { slotid : slotid },
            //data: $.param({slotid: slotid}),
            url: "https://mydomain.abc/Api/reserve_slot/" + slotid + "/" + $scope.docid,
            headers: {'Content-Type': 'application/x-www-form-urlencoded'}
        }).then(function successCallback(response) {    
            $scope.r = response.data.list;
            console.log($scope.r);
            if($scope.r.status == 1){
                $scope.hide();
                $state.go('booking', { slotid: slotid, docid: $scope.docid });
            }

        });
    }

}])

I'm trying to build an ionic 1 app.Haven't added jquery in to it.

Adding Codeigniter controller.

public function reserve_slot(){
        /*
        print_r($_POST); //shows me an empty array
        $slot = $this->input->post('slotid); //no data here
        $doc = $this->input->post('doc'); //no data here
        */
        $slot = $this->uri->segment(3);
        $doc = $this->uri->segment(4);
        $this->load->model('Doctor');
        $this->Doctor->reserve_slot($slot);
        $list['status'] = 1;
        $data['list']= $list;
        header("Access-Control-Allow-Origin: *");
        header("Access-Control-Allow-Methods: PUT, GET, POST");
        header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");
        header('Content-Type: application/json');
        echo json_encode($data);
    }

I think you need a transform function for your data, check out [http://stackoverflow.com/questions/24710503/how-do-i-post-urlencoded-form-data-with-http-in-angularjs](http://stackoverflow.com/questions/24710503/how-do-i-post-urlencoded-form-data-with-http-in-angularjs) — utnaf, Feb 20 '17 at 14:31
Hi, I tried to add $.params. But I am getting the below error. ReferenceError: $ is not defined. I am trying this with ionic. Is there some sort of dependency I need to inject? — Ela Buwa, Feb 20 '17 at 14:38
$ means that you need jQuery, if you don't have jQuery included in your project just try to write your own transform function like said in [this comment](http://stackoverflow.com/a/24964658/6301009) — utnaf, Feb 20 '17 at 14:44
CI code added. I am using uri->segment(3) to get the rest of the controller working. But the print_r displays an empty array in CI — Ela Buwa, Feb 20 '17 at 17:05

score 0 · Accepted Answer · answered Feb 20 '17 at 17:55

Turns out angular has a similar thing for $.param in query.

Below code worked out posting.

$scope.showslot = function(slotid){
        $scope.show();
        //data: $.param({slotid: slotid})
        var pdata = { slotid : slotid , docid : $scope.docid};
        $http({
            method: 'POST',
            //data : { slotid : slotid },
            data: $httpParamSerializerJQLike(pdata),
            url: "https://mydomain.abc/Api/reserve_slot/" + slotid + "/" + $scope.docid,
            headers: {'Content-Type': 'application/x-www-form-urlencoded'}
        }).then(function successCallback(response) {    
            $scope.r = response.data.list;
            console.log($scope.r);
            if($scope.r.status == 1){
                $scope.hide();
                $state.go('booking', { slotid: slotid, docid: $scope.docid });
            }

        });
    }

Angular $http not posting

1 Answers1