CODEWITHSUNDEEP
javascriptphpjqueryheader
Bart Boersma
Bart Boersma

Reputation: 274

PHP header("Location:index.html") nor javascript in php not working

I am making a logout button which calls a PHP script via an AJAX call but somehow my php is not redirecting. Also when I try to use javascript it doesnt work either.

I tried the following things:

When I open the php script directly in my URL (by just typing it in) it redirects me to the page.login.html however from the ajax call its not. When I print the data it prints the page_login.html file which also excludes the option that its not in the correct map.

Anyone any ideas on how to fix this?

HTML

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<div id="logout_button">
Logout
</div>
<script src="jquery-3.2.1.js"></script>
<script src="logout.js" type="text/javascript"></script>
</body></html>

JAVASCRIPT (logout.js)

$('#logout_button').click(function(){
        $.ajax({
            type: 'POST',
            url: 'logout.php',
            error: function(response) { console.log(JSON.stringify(response))},

            success: function(data){
                console.log(data);
            }
        });
})

PHP (logout.php)

<?php
header('Location: http://localhost/page_home.html');
exit;
?>

Upvotes: 1

Views: 819

Answers (3)

user9268966
user9268966

Reputation: 36

You have a misunderstanding of how AJAX is working in this situation. When you're performing an AJAX call, a separate request is being sent as your POST to the given URL. This does not inherently affect the original page you are on in the client window. Essentially, what is happening is:

  1. A user clicks 'logout'
  2. The server (i.e. not the client's web browser) is sending a request to your logout.php
  3. logout.php runs its code and returns a response to your original page (success/fail in this case; or some data if you had a return in your PHP page)

The AJAX here is only a means of sharing information between the two pages, not to run them in succession. What you need to do is redirect the original page, and you can do this with JavaScript! After all, don't forget that JavaScript is our client-side language, with PHP being the server-side one.

There are any number of ways to redirect in JavaScript which you can find. For example, you may use window.location.href in this case:

$('#logout_button').click(function(){
    $.ajax({
        type: 'POST',
        url: 'logout.php',
        error: function(response) { console.log(JSON.stringify(response))},

        success: function(data){
            window.location.href = "http://localhost/page_home.html";
            console.log(data);
        }
    });
});

Upvotes: 2

Skyflo
Skyflo

Reputation: 46

When you call directly your php file, header('Location: http://localhost/page_home.html'); add Location field to the HTTP Header that tell the browser to redirect the user to the specified location. If you call it via ajax, jQuery doesn't care about this header field. What you need is :

$('#logout_button').click(function(){
    //Insert your ajax call here if you need to do something server side like destroy the session 
    window.location.replace('http://localhost/page_home.html');
})

EDIT: As mentionned in the comments, it will be simpler to use a link to your logout.php with the header('Location: http://localhost/page_home.html'); in it.

Upvotes: 2

Niklesh Raut
Niklesh Raut

Reputation: 34914

Use location.href in Javascript inside ajax to redirect or reload, not in .php file

$('#logout_button').click(function(){
        $.ajax({
            type: 'POST',
            url: 'logout.php',
            dataType: "json",
            error: function(response) { console.log(JSON.stringify(response))},

            success: function(data){
                location.href = "/page_home.html";
                //console.log(data);
            }
        });
});

Also send response data from .php to logout/session destroy, like 

<?php
   // Code here to logout or session destroy
   // return json or string 
   $response["success"] =  true;
   echo json_encode($response);
?>

Upvotes: 2

Related Questions