I am using Codeigniter and AngularJS. When I go to submit login.php using a method and action, the post data gets pulled by the Ci controller successfully. But when I try and and submit the form using angular it breaks. I get nothing returned when the print_r is ran. The app.js script is even pulling the values from cred successfully its just not posting to the Ci controller. Any ideas?

login.php

<form ng-submit="login()">
  <fieldset>
    <legend>Login</legend>
    <label>Type your username and password</label>
    <input autofocus ng-model="cred.username" type="text" placeholder="Type your username" required><br>
    <input ng-model="cred.password" type="password" placeholder="Type your password" required><br>
    <button type="submit" class="btn">Submit</button>
  </fieldset>
</form>

app.js

app.factory("AuthenticationService", function($http, $location) {
    return {
        login: function(cred) {
            return $http({
                method : 'POST',
                url : 'index.php/home/login',
                data : cred
            });
        },
    };
});

app.controller('LoginController', function($scope, AuthenticationService) {
    $scope.cred = { username: "", password: ""};
    $scope.login = function() {
        AuthenticationService.login($scope.cred);
    };
});

CodeIgniter controller

public function login() {
        $username = $this->input->post('username');
        $password = $this->input->post('password');
        $this->db->where('username', $username);
        $this->db->where('password', $password);
        $query = $this->db->get('users');
        print_r($_POST);
            if ($query->num_rows() > 0) {
                $row = $query->row();
                echo json_encode(array('isSuccessful' => true));
            } else {
                echo json_encode(array('flash' => 'Invalid username or password'));
            }
    }

I am using Codeigniter and AngularJS. When I go to submit login.php using a method and action, the post data gets pulled by the Ci controller successfully. But when I try and and submit the form using angular it breaks. I get nothing returned when the print_r is ran. The app.js script is even pulling the values from cred successfully its just not posting to the Ci controller. Any ideas?

login.php

<form ng-submit="login()">
  <fieldset>
    <legend>Login</legend>
    <label>Type your username and password</label>
    <input autofocus ng-model="cred.username" type="text" placeholder="Type your username" required><br>
    <input ng-model="cred.password" type="password" placeholder="Type your password" required><br>
    <button type="submit" class="btn">Submit</button>
  </fieldset>
</form>

app.js

app.factory("AuthenticationService", function($http, $location) {
    return {
        login: function(cred) {
            return $http({
                method : 'POST',
                url : 'index.php/home/login',
                data : cred
            });
        },
    };
});

app.controller('LoginController', function($scope, AuthenticationService) {
    $scope.cred = { username: "", password: ""};
    $scope.login = function() {
        AuthenticationService.login($scope.cred);
    };
});

CodeIgniter controller

public function login() {
        $username = $this->input->post('username');
        $password = $this->input->post('password');
        $this->db->where('username', $username);
        $this->db->where('password', $password);
        $query = $this->db->get('users');
        print_r($_POST);
            if ($query->num_rows() > 0) {
                $row = $query->row();
                echo json_encode(array('isSuccessful' => true));
            } else {
                echo json_encode(array('flash' => 'Invalid username or password'));
            }
    }

• php
• javascript
• codeigniter
• angularjs

Share Improve this question Follow asked Aug 30, 2013 at 23:56 Michael GrigsbyMichael Grigsby 12.2k99 gold badges3535 silver badges5353 bronze badges 2

• Did you confirm by Apache logs, that the AJAX call actually reach the server? – SteAp Commented Aug 31, 2013 at 0:03
• It's saying file not found but in my network tab in chrome I'm getting a response from the controller – Michael Grigsby Commented Aug 31, 2013 at 0:04

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

It's probably submitting the form as 'request payload' by default, which will be confusing CodeIgniter. Have a look at How can I post data as form data instead of a request payload? for how to solve it.

Probably the best way around this issue is kzar's solution. It makes converting request payload to urlencoded format pletely transparent.

.config(['$httpProvider', function ($httpProvider) {
  // Intercept POST requests, convert to standard form encoding
  $httpProvider.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";
  $httpProvider.defaults.transformRequest.unshift(function (data, headersGetter) {
    var key, result = [];

    if (typeof data === "string")
      return data;

    for (key in data) {
      if (data.hasOwnProperty(key))
        result.push(encodeURIComponent(key) + "=" + encodeURIComponent(data[key]));
    }
    return result.join("&");
  });
}]);