Updating Page Content Without a Reload in jQuery

Updating part of a page's content after a form submission, without a full page reload, relies on AJAX plus direct DOM manipulation — the one genuine gotcha is that redirecting afterward needs to happen explicitly in JavaScript, since an AJAX call never triggers a browser navigation automatically.

Updating a specific element's content after a successful AJAX call

$('#update-profile-form').submit(function (event) {
    event.preventDefault();

    $.ajax({
        url: '/profile',
        method: 'PUT',
        data: $(this).serialize(),
        success: function (response) {
            $('#profile-name').text(response.name);
            $('#profile-email').text(response.email);
            $('#success-message').show().delay(3000).fadeOut();
        }
    });
});

Submitting a form via jQuery, the basic pattern

function submitForm(formSelector, url, method) {
    return $.ajax({
        url: url,
        method: method,
        data: $(formSelector).serialize(),
    });
}

submitForm('#contact-form', '/contact', 'POST').done(function (response) {
    $('#contact-form')[0].reset();
    $('#thank-you-message').show();
});

Extracting form submission into a small reusable function like this avoids repeating the same $.ajax() boilerplate across multiple forms on a page — each call site just supplies the form selector, URL, and method specific to that particular form.

Redirecting after a successful AJAX submission

$.ajax({
    url: '/login',
    method: 'POST',
    data: $('#login-form').serialize(),
    success: function (response) {
        window.location.href = response.redirectUrl;
    }
});

This is a genuinely important detail: unlike a normal form submission (where the browser follows a server's redirect response automatically), an AJAX request never triggers browser navigation on its own — the server has to return the intended destination URL as data, and the JavaScript success callback has to explicitly set window.location.href to actually navigate there.

Redirecting to the current page (a simple refresh)

success: function () {
    window.location.reload();
}

Sometimes simply reloading the current page after an AJAX action is the simplest correct behavior — worth knowing this is a deliberate, valid choice for cases where a full data refresh is genuinely easier than manually updating every affected piece of the DOM individually.

Showing a loading state during the request

$('#submit-btn').prop('disabled', true).text('Saving...');

$.ajax({
    url: '/profile',
    method: 'PUT',
    data: $('#update-profile-form').serialize(),
    success: function (response) {
        // update DOM
    },
    complete: function () {
        $('#submit-btn').prop('disabled', false).text('Save');
    }
});

complete runs regardless of whether the request succeeded or failed — the right place to reset a button's disabled state and label, ensuring the UI never gets stuck in a permanent "Saving..." state even if the request actually failed.

Handling and displaying a validation error without a page reload

error: function (xhr) {
    if (xhr.status === 422) {
        const errors = xhr.responseJSON.errors;
        $.each(errors, function (field, messages) {
            $(`#${field}-error`).text(messages[0]);
        });
    }
}

Following the same 422-status pattern covered for AJAX form validation elsewhere on this site, this displays each field's specific validation error inline, right next to its corresponding input, without a page reload or losing any of the user's already-entered form data in the other fields.