How to use header redirect in PHP AJAX Call In Pure Javascript?

Question

I am creating a login form and I need to redirect the user to his/her profile page! I am using AJAX Requests so header redirect is not working at all. It just stays on the homepage.

So how can I redirect the user to another page in pure javascript PHP ajax call? Please give the answer in pure javascript. I don't like to use jQuery at all!

Javascript:

function ajaxCall(){
    var xhttp;

    if(window.XMLHttpRequest){
        xhttp = new XMLHttpRequest();
    }

    xhttp.onreadystatechange = function(){
        if(this.readyState === 4 && this.status === 200){
            document.getElementById('error').innerHTML = this.responseText;
        }
    };

    var parameters = 'email='+document.getElementById('email')+'&password='+document.getElementById('password');
    xhttp.open('POST', 'login.php', true);
    xhttp.setRequestHeader('Content-type', 'application/x-www/form/urlencoded');
    xhttp.send(parameters);
}

Login.php(PHP)

<?php
if(isset($_POST['email']) && isset($_POST['password'])){
    $ema = $_POST['email'];
    $pass = $_POST['password'];

    if(!empty($ema) && !empty($pass)){
        if($ema === 'Bill' && $pass === 'Cool'){
            header('Location: https://www.google.com');
        }
    }
}

header('Location: profile.php') not working at all in AJAX! Is there a another way to redirect the user in pure javascript! — Bill
– Bill, Commented Jul 6, 2017 at 12:30
Possible duplicate of How to redirect to another webpage in JavaScript/jQuery? — Abaddon666
– Abaddon666, Commented Jul 6, 2017 at 12:32
@Bill in what sense is it not working? Is there an error message? — Bluefire
– Bluefire, Commented Jul 6, 2017 at 12:34

MontrealDevOne · Accepted Answer · 2020-03-10 22:25:56Z

3

Make an ajax call.

<?php
header('Content-Type: application/json');
echo json_encode(['location'=>'/user/profile/']);
exit;
?>

The ajax response will return something like

{'location':'/user/profile/'}

In your ajax success javascript function

 xhr.onreadystatechange = function () {
            if (xhr.status >= 200 && xhr.status <= 299)
            {
                var response = JSON.parse(xhr.responseText);
                if(response.location){
                  window.location.href = response.location;
                }
            } 

    }

edited Mar 10, 2020 at 22:25

answered Jul 6, 2017 at 12:43

MontrealDevOne

1,0424 gold badges19 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Bill Over a year ago

Isn't that success jQuery? If not how should i use in Javascript AJAX?

Bill Over a year ago

Thanks a lot bro! I just couldn't figure out your solution. But really thanks a lot! Marked as answer :)

Ben in CA Over a year ago

What's the purpose of adding && xhr.status < 300 ? It will return false if it's not 200.

ArabianMaiden · Accepted Answer · 2019-03-25 17:08:31Z

1

I landed here looking for an Ajax solution, nevertheless MontrealDevOne's answer provided useful. If anyone else is curious about the ajax method too, here you go:

$('body').on('submit', '#form_register', function (e) {
    var form = $(this);
    $.ajax({
          type: 'POST',
          url: 'form_submissions.php',
          data: form.serialize() + "&submit",
          dataType:"json",
              success: function (data) {
              if(data.location){
                window.location.href = data.location;
              }
          },
          error: function(data) {
              alert("Error!");
          }
      });
    e.preventDefault();
});

Just my 2 cents, hope it helps :)

answered Mar 25, 2019 at 17:08

ArabianMaiden

5279 silver badges24 bronze badges

1 Comment

James Osguthorpe Over a year ago

this totally helped better understand the top answer - appreciate it bud

Jaykumar Gondaliya · Accepted Answer · 2017-07-06 12:59:07Z

0

try this bill if its works.

  window.location.replace("http://www.google.com");

edited Jul 6, 2017 at 12:59

answered Jul 6, 2017 at 12:39

Jaykumar Gondaliya

3513 silver badges17 bronze badges

4 Comments

Bill Over a year ago

No i am not talking about javascript redirect. I need PHP Header Redirect which is not working in AJAX Call!

Jaykumar Gondaliya Over a year ago

@Bill try this once in your ajax code when you need to redirect if its works to redirect header.

Bill Over a year ago

Thanks for your answer bro! But got the good one from @MontrealDevOne

Jaykumar Gondaliya Over a year ago

@Bill Roger Captan :)

Collectives™ on Stack Overflow

How to use header redirect in PHP AJAX Call In Pure Javascript?

3 Answers 3

3 Comments

1 Comment

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related