I can't send ajax request using XAMP - php

Question

i'm using an ajax login which work perfectly on Wamp Server windows , but when i 've passed to Xamp on kali linux it doesn't work :
$.ajax({
url: baseurl + 'index.php?login/ajax_login',
method: 'POST',
dataType: 'json',
data: {
username: $("input#username").val(),
password: $("input#password").val(),
},
error: function () {
alert("An error occoured!");
},
when i click on login button it shows :An error occoured!
i don't know where is the problem , cause the app work perfectly on wampserver.
i wish that you gonna help me.
for the frameworks i m using codeIgniter .
here it is the form:
<form method="post" role="form" id="form_login">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">
<i class="entypo-user"></i>
</div>
<input type="text" class="form-control" name="username" id="username" placeholder="nom.prenom" autocomplete="off" />
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">
<i class="entypo-key"></i>
</div>
<input type="password" class="form-control" name="password" id="password" placeholder="Password" autocomplete="off" />
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block btn-login">
<i class="entypo-login"></i>
Login
</button>
</div>
</form>
here it is the ajax_login.php:
function ajax_login() {
$response = array();
//Recieving post input of email, password from ajax request
$username = $_POST["username"];
$password = $_POST["password"];
$response['submitted_data'] = $_POST;
//Validating login
$login_status = $this->validate_login($username, $password);
$response['login_status'] = $login_status;
if ($login_status == 'success') {
$response['redirect_url'] = $this->session->userdata('last_page');
}
//Replying ajax request with validation response
echo json_encode($response);
}
it is a function within a controller named login ,and this is the baseurl:
$config['base_url'] = 'http://localhost/elit';
i am using codeIgniter framework

Answer 1

Ok found few things that are missing in the HTML form code :
Edit : After reading Quentin comments and the information that he provided which is right i had to take the part where i said :
First you did not include the action in the form tag , the action
means where this form data are going to be either submitted or
whatever the is going to happen on that form , where it going ?
The correct info is this :
The action attribute is optional. If omitted, the form is submitted to
the current URL. That's irrelevant though since the form isn't being
submitted. JavaScript is reading the data from it and making the HTTP
request instead. For correcting my information about the Action
attribute .
Thank you Quentin for the correct information .
I edited the Form code and the AJAX code with a new one but with few changes , this code works perfect for me on XAMP:
<form action="" method="post" role="form" id="form_login" onsubmit="return UserSignIn();">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">
<i class="entypo-user"></i>
</div>
<input type="text" class="form-control" name="username" id="username" placeholder="nom.prenom" autocomplete="off" />
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">
<i class="entypo-key"></i>
</div>
<input type="password" class="form-control" name="password" id="password" placeholder="Password" autocomplete="off" />
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block btn-login">
<i class="entypo-login"></i>
Login
</button>
</div>
</form>
The AJAX Code :
<script>
function UserSignIn()
{
var username = document.getElementByI('username').value;
var password = document.getElementByI('username').value;
if(username && password )
{
$.ajax({
type: 'POST',
url: '',
data: {
username,
password
},
success: function(response) {
alert("Code Works");
},
error: function(response){
console.log(response);
}
});
}
return false;
}
</script>
Note : In this part url: '' plz put the target page that will receive the data from the AJAX code . For example , if the php page were in the same folder as the page that this form is in ,just type that name page with , ex : url: 'login.php' , if login.php exisst in another folder lets assum that folder name was login you will do this : url: 'login/login.php' .
Now when you do what i asked you to do click on submit , if it show alert box that says " code works "!! thats mean the code works perfect and you are good to go and edit it with your needs , but if it did not , then we have to see your php code .
Hope that fix your issue , let me know if you need more explanation .