刷新页面 - AJAX内容消失

Question

我有一个导航，通过ajax加载动态内容。但是，如果我刷新页面或访问另一个网址并返回，当前内容就会消失，我会在第一个菜单标签下看到旧内容。

解决此问题的最佳方法是什么？你能给我一些代码吗？

在index.php包括元素navigation.inc.php和main_container.inc.php

<?php include("inc/incfiles/header_registrated.inc.php"); ?> 
<?php 
if (!isset($_SESSION["userLogin"])) { 
echo "<meta http-equiv=\"refresh\" content=\"0; url=http://localhost/project\">"; 
} 
else { 
echo ""; 
} 
?> 
<?php include("inc/incfiles/navigation.inc.php"); ?> 
<?php include("inc/incfiles/main_container.inc.php"); ?> 
<?php include("inc/incfiles/footer.inc.php"); ?> 

navigation.inc.php：

 <div class="navigation"> 

     <ul> 
      <li id="1"> 
       <div id="menuImage1" class="menuImage"></div> 
       <div class="menuText"><p>Punkt 1</p></div> 

       <div class="navigationDart"></div> 
      </li> 
      <li id="2"> 
       <div id="menuImage2" class="menuImage"></div> 
       <div class="menuText"><p>Punkt 2</p></div> 
      </li> 
      <li id="3"> 
       <div id="menuImage3" class="menuImage"></div> 
       <div class="menuText"><p>Punkt 3</p></div> 
      </li> 
      <li id="4"> 
       <div id="menuImage4" class="menuImage"></div> 
       <div class="menuText"><p>Punkt 4</p></div> 
      </li> 
      <li id="5"> 
       <div id="menuImage5" class="menuImage"></div> 
       <div class="menuText"><p>Punkt 5</p></div> 
      </li> 
      <li id="6"> 
       <div id="menuImage6" class="menuImage"></div> 
       <div class="menuText"><p>Punkt 6</p></div> 
      </li> 
     </ul> 

    </div> 

main_container.inc.php：

<div class="mainContainer"> 

     <div class="containerHeader"> 

      <div class="contentHeader"> 


      </div> 

     </div> 

     <div class="contentContainer"> 

      <div class="content"> 

      </div> 

      <div class="advertisement"> 

      </div> 


     </div> 

    </div> 

现在divs内容，cnotentHeader和广告（在文件main_content.inc.php中）通过ajax填充。此外导航有一些jquery效果，页面刷新后也必须相同。

$(document).ready(function() { 
$.get('inc/incfiles/content_container/header/1.php', function(data) { 
    $('.contentHeader').html(data); 
}); 

$.get('inc/incfiles/content_container/content/1.php', function(data) { 
    $('.content').html(data); 
}); 

$.get('inc/incfiles/content_container/advertisement/1.php', function(data) { 
    $('.advertisement').html(data); 
}); 
var current = '1.php'; 
$(".navigation li").click(function() { 
    var quelle = $(this).attr('id') + ".php"; 

    // the current content doesn't load again 
    if(current === quelle) { 
     return; 
    } 

    current = quelle; 

    // content 
    $(".content").fadeOut(function() { 
     $(this).load("inc/incfiles/content_container/content/" + quelle).fadeIn('normal'); 
    }) 

    // advertisement 
    $(".advertisement").fadeOut(function() { 
     $(this).load("inc/incfiles/content_container/advertisement/" + quelle).fadeIn('normal'); 
    }) 

    // header 
    $(".contentHeader").fadeOut(function() { 
     $(this).load("inc/incfiles/content_container/header/" + quelle).fadeIn('normal'); 
    }) 

}); 

$(".navigation li").click(function() { 
    $(".menuImage").removeClass("menuImageActive1"); 
    $(".menuImage").removeClass("menuImageActive2"); 
    $(".menuImage").removeClass("menuImageActive3"); 
    $(".menuImage").removeClass("menuImageActive4"); 
    $(".menuImage").removeClass("menuImageActive5"); 
    $(".menuImage").removeClass("menuImageActive6"); 
}); 

$("#1").mousedown(function() { 
    $("#menuImage1").addClass("menuImageClick1"); // new class on mouse button press 
}); 

$("#1").mouseup(function() { 
    $("#menuImage1").removeClass("menuImageClick1"); //remove class after mouse button release 
}); 

$("#1").click(function() { 
    $("#menuImage1").addClass("menuImageActive1"); 
}); 



$("#2").mousedown(function() { 
    $("#menuImage2").addClass("menuImageClick2"); // new class on mouse button press 
}); 

$("#2").mouseup(function() { 
    $("#menuImage2").removeClass("menuImageClick2"); //remove class after mouse button release 
}); 

$("#2").click(function() { 
    $("#menuImage2").addClass("menuImageActive2"); 
}); 



$("#3").mousedown(function() { 
    $("#menuImage3").addClass("menuImageClick3"); // new class on mouse button press 
}); 

$("#3").mouseup(function() { 
    $("#menuImage3").removeClass("menuImageClick3"); //remove class after mouse button release 
}); 

$("#3").click(function() { 
    $("#menuImage3").addClass("menuImageActive3"); 
}); 



$("#4").mousedown(function() { 
    $("#menuImage4").addClass("menuImageClick4"); // new class on mouse button press 
}); 

$("#4").mouseup(function() { 
    $("#menuImage4").removeClass("menuImageClick4"); //remove class after mouse button release 
}); 

$("#4").click(function() { 
    $("#menuImage4").addClass("menuImageActive4"); 
}); 



$("#5").mousedown(function() { 
    $("#menuImage5").addClass("menuImageClick5"); // new class on mouse button press 
}); 

$("#5").mouseup(function() { 
    $("#menuImage5").removeClass("menuImageClick5"); //remove class after mouse button release 
}); 

$("#5").click(function() { 
    $("#menuImage5").addClass("menuImageActive5"); 
}); 



$("#6").mousedown(function() { 
    $("#menuImage6").addClass("menuImageClick6"); // new class on mouse button press 
}); 

$("#6").mouseup(function() { 
    $("#menuImage6").removeClass("menuImageClick6"); //remove class after mouse button release 
}); 

$("#6").click(function() { 
    $("#menuImage6").addClass("menuImageActive6"); 
}); 




$("#1").click(function(){ 

    $(".navigationDart").animate({ 
     top: "16px" 
      }, 500); 
    }); 
$("#2").click(function(){ 
    $(".navigationDart").animate({ 
     top: "88px" 
      }, 500); 
    // Get the src of the image 
    // var src = $(this).css("top"); 

    // Send Ajax request to backend.php, with src set as "img" in the POST data 
    // $.post("/home.php", {"#2": top}); 
    }); 
$("#3").click(function(){ 
    $(".navigationDart").animate({ 
     top: "160px" 
      }, 500); 
    }); 
$("#4").click(function(){ 
    $(".navigationDart").animate({ 
     top: "232px" 
      }, 500); 
    }); 
$("#5").click(function(){ 
    $(".navigationDart").animate({ 
     top: "304px" 
      }, 500); 
    }); 
$("#6").click(function(){ 
    $(".navigationDart").animate({ 
     top: "376px" 
      }, 500); 
    }); 
}); 

Answer 1

您可以使用会话。当你通过ajax加载内容时，将该响应存储到会话变量中，并在你的导航中添加if条件 if（isset（$ _ SESSION ['ajaxresponse']））等。

Answer 2

好的，在你的php文件供应你的Ajax请求，请添加以下行

// assuming that your contents can be stored in a variable $contents 
$_SESSION['mycontent'] = $contents; 

现在，你显示你的Ajax响应，添加的代码有

if(isset($_SESSION['mycontent']) && !empty($_SESSION['mycontent'])) 
echo $_SESSION['mycontent']; 

以下行确保您声明的session_start（）;

希望这会有所帮助！抱歉!如果我不明白你的问题的情况。