ajax jquery always running Error;

Question

Ajax jquery always running error function, althought success function run and i can get session value,i can't run window.location="profile.php";

$(document).ready(function(){
    $("#login").click(function(){
    var username=$("#usern").val();
    var password=$("#user").val();
    $.ajax({
        type: "POST",
        url: "model/user.php",
        data: {
            user_log : username,
            password : password
        },
        dataType: 'json',
        error: function (xhr,textStatus,errorThrown) {

              $("#error").html("<span style='color:#cc0000'>Error:</span> Invalid username and password. ");
        },
        success: function(json){    

                window.location="profile.php";

        },
        beforeSend:function()
        {
            $("#error").html("<img src='http://www.chinesecio.com/templates/base/images/loading.gif' /> Loading...")
        }
      });
      return false;
    });
});

user.php

<?php 
ob_start();
session_start(); 
error_reporting(E_ALL & ~E_NOTICE & ~E_DEPRECATED);
require_once(dirname(__FILE__).'/../model/connect.php');
?>
<?php
global $pdo;

    if(isset($_POST['user_log'])) {
        // username and password sent from Form
        $username=$_POST['user_log']; 
        $password=$_POST['password']; 
        $qr= "SELECT * FROM user where username='$username' AND password='$password'" ;
        $stmt= $pdo->query($qr);
        $row= $stmt->fetch(PDO::FETCH_ASSOC);
        if($stmt->rowCount() > 0)
        {
            $_SESSION['id']=$row['id'];
            $_SESSION['name_mem']=$row['username'];
            $_SESSION['level_mem']=$row['level'];
        }
        header("location:../../../../index.php");
    }
?>

Answer 1

you can use ajax like this,

   <script>
        $("#login").click(function(){

         var username=$("#usern").val();
         var password=$("#user").val();
        $.ajax({
                    xhr: function() {
                        var xhr = new window.XMLHttpRequest();
                        //progress        
                        xhr.upload.addEventListener("progress", function(e) {
                            //progress value : you can load progress bar in here                            
                        }, false);
                        return xhr;
                    },
                    type: "POST",
                    url: "model/user.php",
                    data: {'username' : username, 'password' : password},
                    dataType:json,
                    success: function(msg) {
                       //when success //200 ok
                     if(msg.status=="done"){
                    window.location="profile.php";                     
                      }else{    
                       $("#error").html("<span style='color:#cc0000'>Error:</span> "+msg.massage); 
               }

                    },
                error: function(jqXHR, textStatus, errorThrown) {
                   //when error: this statement will execute when fail ajax 
                }
            });
    });
    </script>

server side code like this(inside user.php ),

         $username=$_POST['username']; 
         $password=$_POST['password']; 

         ...........


        //$status="fail" or "done"
        //success must be always success
        //$massage= "password or username not match"
$respond=array("success"=>"success","status"=>$status,"massage"=>$massage);
       echo json_encode($respond);
       exit;

I hope you useful this.

Answer 2

Remove this line :

header("location:../../../../index.php");

If above doesn't work, omit this from ajax properties :

dataType: 'json',