Question

我有一组div，每个div包含一组e-comm网站的产品。单击某个股票按钮时，只能看到一个div。

当用户打开一个新的div我有一个ajax方法发送$_get variable到一个php文件，用一个面板号更新数据库，这样我就可以保留一个面板历史记录。当用户点击div中显示的产品时，它会将他们带到详细信息页面，然后如果用户决定继续浏览并点击后退按钮返回产品显示div另一个ajax，则在$(window).load ajax上调用php文件，用于从数据库中检索面板编号，并自动显示用户在页面重新加载时打开的最后一个可见div。

虽然由于某种原因，即使使用正确的面板编号更新了数据库，ajax也会在单击后退按钮时收到先前的响应，而不是正确的响应。但是，如果我使用刷新按钮进行测试，那么当页面重新加载时一切正常。

示例：

打开＆＃34; 服装＆＃34; div - ＆gt; ajax发送＆＃34; 2＆＃34;到php文件 - ＆gt; php文件更新数据库＆＃34; 2＆＃34; - ＆gt; 用户导航，点击返回，ajax调用php文件 - ＆gt; php文件检索面板编号＆＃34; 2＆＃34;从数据库中打开＆＃34; 服装＆＃34; div通过ajax调用的成功函数。一切顺利

但现在如果我打开另一个小组..

打开＆＃34;收藏＆＃34; div - ＆gt; ajax发送＆＃34; 1＆＃34;到php文件 - ＆gt; php文件更新数据库＆＃34; 1＆＃34; - ＆gt; 用户导航，点击返回，ajax调用php文件 - ＆gt; ，但这次收到＆＃34; 2＆＃34;在响应中而不是＆＃34; 1＆＃34;并再次打开＆＃34;服装＆＃34; div而不是＆＃34;可收集＆＃34; div

为什么ajax会收到之前的＆＃34; 2＆＃34;响应而不是＆＃34; 1＆＃34;即使已使用正确的面板编号更新了数据库。如果我在打开不同的div后用刷新按钮测试重新加载页面它总是显示正确的div，但是如果我使用后退按钮它只显示旧的div。

Ajax发送方法

 // user clicks apparel panel
    $("#stockApparel").click(function(){

      var $apparel = "2";

      $.ajax({
          url: "php/panel.php",
          data: { panel_update: $apparel },
          type: "get",
          dataType: "text",
          success: function(response){
          },
      });

      var divPosition = $('#shippingImg').offset();
      $('html, body').animate({scrollTop: divPosition.top}, "slow");
      $("#stockButtons").animate({left: '1140px'});
      $("#new").animate({left: '-470px'});
      $("#apparel").show(700);
      $("#marketing").hide(100);

  });

在窗口加载时检索

$(window).load(function(){

         $get = "get_panel";

         $.ajax({
          url: "php/panel.php",
          data: { panel_get: $get },
          type: "get",
          dataType: "text",

          success: function(response){
             switch (response) {

                 case "1": // collectable panel

                 $("#stockButtons").animate({left: '1140px'});
                 $("#new").animate({left: '-470px'});
                 $("#collectable").show(700);
                 $("#marketing").hide(100);

                 var divPosition = $('#shippingImg').offset();
                 $('html, body').animate({scrollTop: divPosition.top}, "slow");

                 alert(response);

                 break;

                 case "2": // apparel panel

                 $("#stockButtons").animate({left: '1140px'});
                 $("#new").animate({left: '-470px'});
                 $("#apparel").show(700);
                 $("#marketing").hide(100);

                 var divPosition = $('#shippingImg').offset();
                 $('html, body').animate({scrollTop: divPosition.top}, "slow");

                 alert(response);

                 break;

                 default:

             }

          },

       });

     });

PHP文件

<?php
require_once 'connect.php';

if (isset($_GET['panel_update'])) { // Sets the panel number 

    $set = $_GET['panel_update'];
    $sql = "UPDATE panel SET panel='$set' WHERE id=1";


    if ($mysqli->query($sql) === true) {

    } else echo "mysql error:" . $mysqli->error;


}

if (isset($_GET['panel_get'])) { // Retrieves the panel number

    $get = $_GET['panel_get'];
    $sql = "SELECT * FROM panel WHERE id=1";
    $result = $mysqli->query($sql);

    $row = $result->fetch_assoc();

    echo $row['panel'];

}
?>

Answer 1

听起来你的AJAX响应正在被缓存。如果您正在使用PHP会话，那么响应通常会有正确的无缓存标头，但如果没有，则浏览器将缓存。当你点击'刷新＆＃39;在浏览器中它会强制发生新的请求，这就是为什么你会看到＆＃34;正确的值＆＃34;刷新后。

查看是否正在发送正确的无缓存标头的快速方法是使用Chrome开发工具或Firefox开发工具并切换到网络标签。在AJAX调用的 Response Headers中，查找Cache-Control：no-cache和friends。

单击浏览器后退按钮后，ajax会收到上一个响应吗？

1 个答案: