Fatal编程技术网
  • php/
  • Php 大任务-页面刷新和ajax问题

Php 大任务-页面刷新和ajax问题

php jquery ajax session

Php 大任务-页面刷新和ajax问题,php,jquery,ajax,session,page-refresh,Php,Jquery,Ajax,Session,Page Refresh,我有一个通过ajax动态加载内容的导航。但是，如果我刷新页面或访问另一个url并返回，当前内容就会消失，我会在第一个菜单选项卡下看到旧内容 现在我必须解决这个问题 index.php包括元素header_registered.inc.php、navigation.inc.php和main_container.inc.php index.php： <?php include("inc/incfiles/header_registrated.inc.php"); ?> <?php

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

现在我必须解决这个问题

index.php包括元素header_registered.inc.php、navigation.inc.php和main_container.inc.php

index.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"); ?>
我的想法是使用if（isset（$\u SESSION['ajaxresponse']），但我不知道如何做到这一点

请帮帮我。我觉得我已经搜索了整个web以找到答案。

如果您需要动态加载的选项卡，请尝试，它内置了AJAX支持

如果您想要向后/向前支持AJAX事件，请尝试jQuery地址插件

关于如何在此处使用，有一个很好的答案：

如果您需要动态加载的选项卡，请尝试一下，它内置了AJAX支持

如果您想要向后/向前支持AJAX事件，请尝试jQuery地址插件

关于如何使用这里有一个很好的答案：

我建议使用一个库，它通过AJAX将PHP与jQuery联系起来，可以大大缓解您的问题。这个图书馆很有趣 只需对navigation.js文件进行一些优化：

您需要将AJAX集中（或不集中）在一个文件中，以使其更容易。 它可以放在
index.php的顶部


函数加载（$data）{
$r=新的PheryResponse；
如果（！isset（$\u会话[“userLogin”]））{
返回$r->重定向（'http://localhost/project');
}
$path='inc/incfiles/content_container/'；
如果（isset（$data['id']））{
$id=$data['id']..php'；
}否则{
if（！empty（$\u会话['id']））{
$id=$\会话['id']；
}否则{
$id='1.php'；
}
}
$\u SESSION['id']=$id；//保存当前id，并在用户下次刷新页面时加载
ob_start（）；
包括$path.content/。$id；
$content=ob_get_clean（）；
ob_start（）；
包括$path.“广告/”.$id；
$ads=ob_get_clean（）；
ob_start（）；
包括$path.'header/'.$id；
$header=ob_get_clean（）；
$r
->jquery（'.advision'）->html（$ads）
->jquery（'.contentHeader'）->html（$header）
->jquery（'.content'）->html（$content）
;
//等
return$r->this（）->find（'.menuImage'）->addClass（'menuImageActive'）；//将LI元素的当前menuImage设置为menuImageActive
}
会话_start（）；
Phery:：instance（）->set（数组(
“加载”=>“加载”
))->过程（）；


由于您的JS it现在无法运行，我已重新进行了：


$（函数（）{
远程（“加载”）；
变量菜单\图像=$（“.menuImage”）；
$（文件）
.on（'click'，'navigation li'，函数（事件）{
menu_image.removeClass（“menuImageActive”）；
var-top；
开关（event.currentTarget.id）{
案例“1”：
top=“16px”；
打破
案例“2”：
top=“88px”；
打破
案例“3”：
top=“160px”；
打破
案例“4”：
top=“232px”；
打破
案例“5”：
top=“304px”；
打破
案例“6”：
top=“376px”；
打破
}
$（event.currentTarget）
.find（“.navigationDart”）.animate（{top:top}，500）；
})
.on（'mousedown'，'.navigation li'，函数（事件）{
$（event.currentTarget）.addClass（'menuImageClick'）；
})
.on（'mouseup'，'.navigation li'，函数（事件）{
$（event.currentTarget）.removeClass（'menuImageClick'）；
});
});


您的
navigation.inc.php
必须是：




    

  • 
朋克1
    

    • 

  • 
朋克2
    

    • 

  • 
朋克3
    

    • 

  • 
朋克4
    

    • 

  • 
朋克5
    

    • 

  • 
朋克6
    

    • 




由于HTML的简单性，CSS似乎很复杂。你不应该用一个数字来表示一个ID，ID应该是，在这种情况下，你应该重用css类，比如


.menuImageActive{
/*常用样式*/
}
.menuImageClick{
/*常用样式*/
} 
/*按ID申请*/
#menuImage1.menuImageActive{
}
#menuImage1.menuImageClick{
}
#menuImage2.menuImageActive{
}
#menuImage2.menuImageClick{
}
#menuImage3.menuImageActive{
}
#menuImage3.menuImageClick{
}
#menuImage4.menuImageActive{
}
#menuImage4.menuImageClick{
}
#menuImage5.menuImageActive{
}
#menuImage5.menuImageClick{
}
#menuImage6.menuImageActive{
}
#menuImage6.menuImageClick{
}

我建议使用一个库，通过AJAX将PHP与jQuery联系起来，可以大大缓解您的问题。这个图书馆很有趣
只需对navigation.js文件进行一些优化：

您需要将AJAX集中（或不集中）在一个文件中，以使其更容易。
它可以放在
index.php的顶部


函数加载（$data）{
$r=新的PheryResponse；
如果（！isset（$\u会话[“userLogin”]））{
返回$r->重定向（'http://localhost/project');
}
$path='inc/incfiles/content_container/'；
如果（isset（$data['id']））{
$id=$data['id']..php'；
}否则{
if（！empty（$\u会话['id']））{
$id=$\会话['id']；
}否则{
$id='1.php'；
}
}
$\u SESSION['id']=$id；//保存当前id，并在用户下次刷新页面时加载
ob_start（）；
包括$path.content/。$id；
$content=ob_get_clean（）；
ob_start（）；
包括$path.“广告/”.$id；
$ads=ob_get_clean（）；
ob_start（）；
包括$path.'header/'.$id；
$header=ob_get_clean（）；
$r
->jquery（'.advision'）->html（$ads）
->jquery（'.contentHeader'）->html（$header）
->jquery（'.content'）->html（$content）
;
//

<?php
include ("inc/scripts/mysql_connect.inc.php");
session_start();
$user = $_SESSION["userLogin"];
?>




<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>title</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" src="js/framework/jquery.js"></script>
<script language="JavaScript" src="js/dropdown/window.js"></script>
<script language="JavaScript" src="js/navigation/navigation.js"></script>
</head>
<body>
</body>



  <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>



<div class="mainContainer">

    <div class="containerHeader">

        <div class="contentHeader">


        </div>

    </div>

    <div class="contentContainer">

        <div class="content">

        </div>

        <div class="advertisement">

        </div>


    </div>

</div>



$(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 );
        });
    $("#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 );
        });
    });