jQuery - Redirecting a Page


I am using PHP and jQuery to validate a login. If the user enters wrong user/pass, an error message will be shown on the index.php page, under a <DIV></DIV> tag. This works fine…

But, how do I make an index.php page redirect to welcome.php once the user enters the correct login information? Since everything is handled by jQuery, hence using the header(“location: welcome.php”) function will not work as the page is NOT refreshing.

Please help.


When you get a valid login, use

window.location = 'welcome.php'; 

How would jQuery know that the login is correct since the authentication process is handled by PHP?

but the php has to react depending on whether the login was correct or not. If its incorrect its reacting a certain way in which you are able to show an error message.

If its correct, you should be able to react by redirecting.

Maybe if you could show us some code, we could point you in the right direction.

Um, you said that you cannot use php’s header('location… etc… Why not??

Correct me if i’m wrong but the server side code CANNOT redirect the client browser page using header redirects when using ajax. It will simply redirect the ajax call to that url.

Sorry, I think I misunderstood what the OP was saying.

@Cancer10 - Gavin’s original code should work. The PHP must feed back to the client side somehow - the response within the DIV obviously originates from the server side. You could, dependent on the eventual contents of that div, redirect the user appropriately.

Jimmy my last post was not directed at you, I think the OP misunderstood how ajax works.

Basically jquery receives a response from the server. You could, if i recall pass back javascript and it will eval it… Unless we see how your doing it now, we can’t really help.

Yep I agree! :slight_smile:

Let’s see some code! :smiley:

If you redirect from within PHP use the PHP header function to redirect.

Once displayed on the page use the meta refresh tag or the JavaScript redirect. Using both is the best practice, for some browsers are not JS enabled.

But if you do a redirect within an ajax call it will not redirect the browser to that url, it will redirect the ajax call to that url. The ajax call will not return the response from the original url but the response of the redirected url.

If you use Ajax you have two options:

  1. Submit back a JavaScript that will redirect
  2. Submit back a successful login, and then redirect to the new URL from the existing code.

Both work fine.

For teaching purpose only:

function onError(xhr, st, er) {
		alert('Server busy');
function onSuccess(json) {
		var login= parseInt(json.login,10);
			// no login
			alert('no login');
		else if(login==1){
			alert('good login');
			window.location = 'welcome.php';
			alert('no login');
 	$.ajax( {
		url: 'login.php',
		type : 'POST',
		success : onSuccess,
    	data : {username : 'theusername', password : 'thepassword'},
    	dataType : 'json',
		error : onError
	} );


$username= 'theusername';
$password= 'thepassword';
if(isset($_POST['username']) && isset($_POST['password'])){
//You must check input data
	if($_POST['username']==$username && $_POST['password']==$password){
		echo json_encode(array('login'=>1));
		echo json_encode(array('login'=>null));

If you use ajax you can’t manage redirect server-side.
You can add server-side a thing like this:

function isXhr(){
	return (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && $_SERVER['HTTP_X_REQUESTED_WITH']=='XMLHttpRequest');
	//you are using ajax with jquery
	//server side

I hope this help.


Nice example.