How to Redirect After a Successful jQuery AJAX Request

An AJAX request itself has no ability to trigger a full browser navigation — redirecting after a successful AJAX call is done with plain JavaScript inside the success callback, once the request has confirmed the server-side action actually completed.

The basic pattern

$.ajax({
    url: '/checkout/complete',
    method: 'POST',
    data: formData,
    success: function (response) {
        window.location.href = '/order-confirmation/' + response.orderId;
    }
});

window.location.href triggers a genuine full-page navigation to the new URL — this is the actual redirect mechanism, and it only runs once success confirms the server responded without error.

Redirecting to a URL the server itself provides

$.post('/login', credentials, function (response) {
    window.location.href = response.redirectUrl;
});

// Laravel controller
public function login(Request $request)
{
    // ... authenticate the user

    return response()->json([
        'redirectUrl' => auth()->user()->is_admin ? '/admin/dashboard' : '/dashboard',
    ]);
}

Having the server decide and return the actual redirect destination (rather than hardcoding it in the JavaScript) is the more flexible approach when the destination depends on server-side logic — like a role-based redirect, as shown here, which the client-side code shouldn't need to know how to determine on its own.

Redirecting with a brief delay, to let a success message display first

$.post('/subscribe', formData, function () {
    $('#success-message').show();
    setTimeout(function () {
        window.location.href = '/thank-you';
    }, 1500);
});

A short delay via setTimeout before redirecting lets a brief success message actually be seen by the user — redirecting instantly on success can feel abrupt if there's a message meant to confirm what just happened.

Using location.replace() instead, to prevent a "back" button return

window.location.replace('/order-confirmation');

location.replace() redirects without adding the current page to browser history — appropriate for something like a checkout completion page, where a user pressing "back" shouldn't be able to return to (and potentially resubmit) the completed form.

Handling the error case, rather than only the success path

$.ajax({
    url: '/checkout/complete',
    method: 'POST',
    data: formData,
    success: function (response) {
        window.location.href = '/order-confirmation/' + response.orderId;
    },
    error: function (xhr) {
        $('#error-message').text('Something went wrong. Please try again.').show();
    }
});

Handling error explicitly, rather than only wiring up the redirect in success, matters here specifically because a failed AJAX request should never redirect the user forward as if the action had actually succeeded.