Search code examples
ajaxgoogle-chromepostreloadback

chrome + back to post + reload = ajax error

problem : ajax error with google chrome

index.html --- POST ---> page1.php --- link ---> page2.html

  1. “index.html” contains a <form> that posts to “page1.php”
  2. “page1.php” contains a link to “page2.html”
  3. “page1.php” contains an ajax call to “ajax.php”

how to make the problem appear ?

  1. visit “index.html”
  2. post to “page1.php”
  3. follow link to “page2.html”
  4. go back to “page1.php” with the back button
  5. reload “page1.php” with F5
  6. accept to re-submit the datas
  7. ajax error : the ajax call fails with an empty error message

why is... that thing ?

index.html :

<html>
  <head>
  </head>
  <body>
    index
    <form method="post" action="page1.php">
      <input type="submit">
    </form>
  </body>
</html>

page1.php :

<html>
  <head>
    <script src="jquery-1.10.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
      function call_ajax()
      {
        $.ajax
        (
          {
            type: "POST",
            url: "ajax.php",
            success: function( response )
            {
              console.log( response );
            },
            error: function (xhr, ajaxOptions, thrownError)
            {
              console.log( '%o', xhr );
              console.log( '%o', xhr.responseText );
              console.log( '%o', thrownError );
            }
          }
        );
      }

      $( document ).ready(function() {
        call_ajax();
      });
    </script>
  </head>
  <body>
    page 1
    <a href="page2.html">page2</a>
  </body>
</html>

page2.html :

<html>
  <head>
  </head>
  <body>
    page 2
    <a href="javascript:history.back()">back</a>
  </body>
</html>

ajax.php :

<?php
  ini_set('display_errors', 1);
  ini_set('display_startup_errors', 1);
  ini_set('error_reporting', E_ALL);
  header('Cache-Control: no-cache, must-revalidate');
  header('Content-type: application/json');
  $r = array( 'message' => 'one two one two, this is a test' );
  echo json_encode( $r );
?>
Solution

  • Might it be, that there is something wrong with the configuration of your server/browser?

    I tried to confirm your problem by creating the files with exactly the same code as above in my local installation of lighttpd using PHP via fastcgi and running Chromium version 30.0.1553.0 (209444), but was unable to reproduce your issue.

    When looking at the console, the log always shows the correct output whether I access page1.php from index.html or from page2.html using the "back" link and refreshing with F5.

    Object {message: "one two one two, this is a test"}