php中的静态页眉布局

我想知道如何在不刷新页眉的情况下重新加载内容。我在下面创建了一个小样本代码。php中的静态页眉布局

的header.php

<html> 
    <head> 
    </head> 
    <body> 
     <ul> 
     <li><a href="index.php">Home</a></li> 
     <li><a href="index2.php">News</a></li> 
     </ul>

的index.php

<?php 
     include("header.php"); 
    ?> 
    <div> 
    This is contents 1 
    </div> 
    </body> 
</html>

index2.php

<?php 
     include("header.php"); 
    ?> 
    <div> 
    This is contents 2 
    </div> 
    </body> 
</html>

我认为指数index2页面作为内容页面。

当我点击主页或新闻链接时，内容页面会加载，但每次点击时也会刷新header.php。

我想知道，如何加载内容页面时，请点击首页链接时不带新鲜的header.php。

任何想法用php或javascripts做到这一点？

来源

2016-08-12 sj2012

恭喜它也有效。如果你能接受我的答案，它也会帮助我：D，试图建立一个可以信任的账户:) –

主要编辑

使用@米希尔的代码。我想出了一个工作样本。

的index.php

<html> 
    <head> 
    </head> 
    <body> 
    <?php include 'header.php'; ?> 
    <div id="content"> 
    </div> 
    </body> 
    <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> 
    <script> 
    function go_to_home() 
    { 
     $('#content').load('home.php'); 
     return false; 
    } 

    function go_to_news() 
    { 
     $('#content').load('news.php'); 
     return false; 
    } 
    </script> 

</html>

的header.php

<div> 
    <ul class="navbar"> 
    <button onclick="go_to_home();">home</li> 
    <button onclick="go_to_news()">News</li> 
    </ul> 
</div>

home.php

<div> 
    <p>I am at home</p> 
</div>

news.php

<div> 
    <p>This is my news</p> 
</div>

现在这个工作！：D

来源

2016-08-12 04:52:59

感谢你的想法，@洛伦佐马格诺。我没有得到它。如果你能提供一个小例子，我可以通过它。 – sj2012

没问题，我会在一段时间内添加一段代码来帮助你。 –

我感谢你的帮助@Lorenzo Magno。我知道了。如果它不打扰你。我还有一个问题。我已经开发了一个网站。所以它有几个外部的PHP文件。那么，还有其他方法可以调用外部php文件吗？ – sj2012

你必须使用AJAX来处理这种事情。你想要做的是SPA（单页应用）。尽管可以使用简单的AJAX请求来构建自己的SPA以获取部分视图，但我建议您学习React或Angular。

为了达到预期效果，您可以在简体中文中使用简单的XHR JavaScript，或者您可以使用jQuery的$.ajax,$.post,$.get。如果你选择jQuery，你会在整个应用程序中使用这种方法。

Master.php文件 -

<html> 
    <head> 
    </head> 
    <body> 
    <?php include 'header.php'; ?> 
    <div id="content"> 
    </div> 
    </body> 
    <script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script> 
    <script type="text/javascript" src="main.js"> 
</html>

content.php -

<div> 
    <p>Content 1 goes here</p> 
</div>

报头。PHP -

<div> 
    <ul class="navbar"> 
    <li id="home">home</li> 
    <li id="content">content</li> 
    </ul> 
</div>

main.js -

$(document).ready(function() { 
    $.ajax({ 
    url: "content.php", 
    cache: false 
    }) 
    .done(function(html) { 
    $("#content").html(html); 
    }); 
});

这只是它是如何工作的总体思路。我没有测试过这些代码，请不要期望它能够运行。您需要在导航栏中的链接上使用onclick侦听器来调用AJAX并呈现正确的局部视图。

来源

2016-08-12 05:08:42 Mihir

+1，这是我正在处理的代码。虽然他没有测试代码，但我认为@sj2012会得到它的要点。 –

@LorenzoMagno是的。它没有经过测试，也没有完成。但它肯定会给sj2012一个努力的方向。 – Mihir

@Mihir我试过了，但它不起作用，我对ajax不是很熟悉 – sj2012

php中的静态页眉布局

回答

相关问题