Javascript php中的静态标题布局
我想知道如何在不刷新标题的情况下重新加载内容。我在下面创建了一个小示例代码 Header.php index.php index2.php 我假设index和index2页面作为内容页面 当我单击主页或新闻链接时，内容页会加载，但header.php也会在每次单击时刷新 我想知道，当单击主页链接时，如何在不获取fresh header.php的情况下加载内容页 使用php或javascripts有什么想法吗？主要编辑 使用@Mihir的代码。我找到了一个工作样本 index.php header.php home.php news.phpJavascript php中的静态标题布局,javascript,php,jquery,html,Javascript,Php,Jquery,Html,我想知道如何在不刷新标题的情况下重新加载内容。我在下面创建了一个小示例代码 Header.php index.php index2.php 我假设index和index2页面作为内容页面 当我单击主页或新闻链接时，内容页会加载，但header.php也会在每次单击时刷新 我想知道，当单击主页链接时，如何在不获取fresh header.php的情况下加载内容页 使用php或javascripts有什么想法吗？主要编辑 使用@Mihir的代码。我找到了一个工作样本 index.php header
现在可以了！！：D对于这类事情，您必须使用AJAX。您试图做的基本上是SPA单页应用程序。虽然可以使用简单的AJAX请求来获取部分视图来构建自己的SPA，但我建议您学习React或Angular 为了达到预期的效果，可以在香草javascript中使用简单的XHR，也可以使用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>
这只是它将如何工作的一般概念。我还没有测试代码，请不要期望它按原样运行。您需要在导航栏中的链接上使用onclick侦听器来调用AJAX并呈现正确的局部视图 “谢谢你的主意，”洛伦佐·马格诺说。我没弄清楚。如果你能提供一个小例子，我可以看一下。没问题，我会在一段时间内添加一个代码来帮助你。我感谢你的帮助@Lorenzo Magno。我得到了它。如果你不介意的话。我还有一个问题。我已经开发了一个网站。因此它几乎没有外部php文件。那么，还有其他方法可以调用外部php文件吗？是的，我正在研究。我认为@Mihir添加的答案是一个更正确的代码。这就是我正在做的。你可以按照他的指导去做，如果可以给我的答案投赞成票的话，我很乐意帮你：@Mihir，谢谢你，我也缺乏一些知识，早些时候几乎得出了一个错误的答案，使用你的代码帮了我很大的忙，让我得出了正确的答案+这是我正在编写的代码。虽然他没有测试代码，但我认为@sj2012会明白其中的要点。@LorenzoMagno是的。它没有经过测试，也不完整。但它肯定会给sj2012一个工作方向。@Mihir我试过了，但没用，我对它不太熟悉ajax@Mihir，sj2012对他来说有点难，因为他是ajax的初学者，我不是专家，但我可以让它工作，如果你能编辑你的代码，我想这会对他有很大帮助。我也在试着自己去做：@sj2012，太好了！我将给您三个步骤来熟悉web开发。1.学习PHP页面生命周期，构建示例应用程序。2.学习javascript及其使用原因。3.了解AJAX及其使用原因。一旦你完成这些步骤，你就会飞得很好。祝你好运祝贺你也能成功。如果你能接受我的回答，这也会帮助我：D，尝试建立一个可信任的帐户：
<?php
include("header.php");
?>
<div>
This is contents 1
</div>
</body>
</html>
<?php
include("header.php");
?>
<div>
This is contents 2
</div>
</body>
</html>
<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>
<div>
<ul class="navbar">
<button onclick="go_to_home();">home</li>
<button onclick="go_to_news()">News</li>
</ul>
</div>
<div>
<p>I am at home</p>
</div>
<div>
<p>This is my news</p>
</div>
<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>
<div>
<p>Content 1 goes here</p>
</div>
<div>
<ul class="navbar">
<li id="home">home</li>
<li id="content">content</li>
</ul>
</div>
$( document ).ready(function() {
$.ajax({
url: "content.php",
cache: false
})
.done(function( html ) {
$( "#content" ).html( html );
});
});