I am trying to use ajax in bootstrap form. I am using PHP on the serve side. The ajax method successfully posts the data but fails to receive any data. The status shown is 200 and ready state is also 4 but still the error function is executed. The PHP script has the header as application/json and uses json_encode. But it seems that the ajax never gets the object that the server sent! Please help.
this is the jquery: `
$.ajax({
url:'http://localhost/Texephyr/startbootstrap-agency-1.0.5/login.php',
method:'POST',
data:$('#log-in').serialize(),
dataType:'json',
success:function(msg){
if(msg =="true"){
window.location.assign("admin/pages/index.php");
console.log(msg);
}
else{
if(msg == "false-p"){
$('#password-error').append('Invalid Password');
console.log(msg);
}
else{
$('#email-error').append('Invalid Username');
console.log(msg);
}
}
},
error: function(msg){
$('#email-error').append("There was an Error!");
console.log(msg)
}
});`
and this is the PHP script: `
<?php
header("Content-type: application/json");
session_start();
include("db_config.php");
$json = array("txt" = >"false");
if(isset($_POST['username']) && isset($_POST['password'])){
$query = "SELECT id,f_name,l_name,password FROM users WHERE email = '$uname'";
$login-status = $db->query($query);
if($login-status->num_rows ===1){
$result = $login-status->fetch_assoc();
if(password_verify($passd,$result["password"])){
$_SESSION["fname"] = $result["first_name"];
$_SESSION["lname"] = $result["last_name"];
$_SESSION["id"] = $result["id"];
$json["txt"]="true";
echo json_encode($json);
}
else{
$json["txt"]="false-p";
echo json_encode($json);
}
}
else {
$json["txt"] = "false";
echo json_encode($json);
}
}else{
$json["txt"]="false";
echo json_encode($json);
}
?>
`
Looks like you have to change javascript file like this
$.ajax({
url:'http://localhost/Texephyr/startbootstrap-agency-1.0.5/login.php',
method:'POST',
data:$('#log-in').serialize(),
success:function(msg){
msg=$.parseJSON(msg);
if(msg.txt =="true"){
window.location.assign("admin/pages/index.php");
console.log(msg);
}
else{
if(msg.txt == "false-p"){
$('#password-error').append('Invalid Password');
console.log(msg);
}
else{
$('#email-error').append('Invalid Username');
console.log(msg);
}
}
},
error: function(msg){
$('#email-error').append("There was an Error!");
console.log(msg)
}
});`
You were setting the datatype as json since we are sending normal text data to php it can be eliminated. And in the response data it is better to parse the data returned to an Object by $.parseJSON()
Then you can remove header() code from php script, code i posted will work without json headers.