jQuery AJAX后重定向问题

Question

I have the following code that should redirect to the index page of my website after the AJAX method completes. It redirect however the page doesn't have any content loaded, it is just an empty page with a background.

function login(){
    var uname = document.getElementById("UserName").value;
    var upass = document.getElementById("Password").value;

    var response = $.ajax({ type: "POST",
        url: "../../php_scripts/ajax.php",
        data: "call=login(" + uname + ", " + upass + ")",
        async: false
    }).responseText;

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

What could cause this problem? could this be a server issue?

[EDIT]

Also if I put the redirect call above the AJAX everything loads correctly.

[EDIT 2]

If I use an asynchronous AJAX with callback method of any kind it causes exact same problem. I'm beginning to think that this is a jQuery bug.

Answer 1

You need to do the redirect on success of the ajax call.

If your request is async: false then you should not use ajax.done(), ajax.fail() etc methods to register the callback methods, instead you need to pass the callback methods using success/error/complete options to the ajax call

$.ajax({
  async: false,
  success: function(){
        window.location.replace("http://www.domainname.com");
  },
  error: function(){
  },
  complete: function(){
        window.location.replace("http://www.domainname.com");
  }
})

Answer 2

(Posted on behalf of the OP).

After hours of tinkering I found the culprit of the problem. It had nothing to do with JavaScript or AJAX - in fact the error originated in the SQL database. There was an incorrectly setup up relationship constraint which caused my PHP record update method to fail.

This made the method return a null back to the calling method which then was saved into a variable and then later a member method was called on that variable. Calling a member method on a null type broke the PHP which is why nothing was displayed on my page.

Answer 3

Use complete callback to redirects to desired page. After completing request then you'll be redirected to the page.

Try this:

function login(){
    // use jquery anyway if you reference to this
    var uname = $("#UserName").val();
    var upass = $("#Password").val();

    var response = $.ajax({ type: "POST",
        url: "../../php_scripts/ajax.php",
        data: "call=login(" + uname + ", " + upass + ")",
        async: false,
        complete: function() { 
            // redirects is done with below code
            window.location.replace("http://www.domainname.com");
        }
    }).responseText;
}