在ajax之后覆盖页面缓存

Question

I haven't been able to find a straightforward answer for this question.

I have an admin panel that shows extra options if the user inputs a password. If the password is correct, these extra options are appended to the page.

Admin Panel w/password input:

Javascript that loads the super admin options and appends them to the page:

  function showAdminOptions(e) {
    e.preventDefault();
    var data = new FormData();
    data.append('additional_password', document.getElementById('additional_password').value);
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'show_admin_options.php', true);
    xhr.withCredentials = true;
    xhr.onload = function() {
      if (xhr.status >= 200 && xhr.status < 400) {
        // Success!
        document.getElementById('show_admin_options').innerHTML = xhr.responseText;
      } else {
        alert("ERROR");
      }
    };
    xhr.onerror = function() {
      alert("ERROR");
    };
    xhr.send(data);
  }

NOTE: If the password is correct, the markup for the extra options is returned from show_admin_options.php.

Admin panel w/extra options, after inputting correct password:

The problem is, when someone who has inputed the correct password navigates away from the page and then hits the back button, it loads the original version of the admin page w/out the extra options.

What can I do to make the cache save the page in it's state w/extra options?

Answer 1

MY SOLUTION

I decided to just forget about doing this asynchronously, and made the form submit with a method of POST, and an action of the same url. The PHP template then renders the admin options using the $_SESSION variable that was set.