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'));
}
}
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("&");
});
}]);