我想用javascript动态更改主要内容，而不是单个页面

我的网站目前正在使用.tpl模板文件动态加载不同的页面。这将再次加载整个页面，包括页眉、侧栏（聊天）、主要内容和页脚

在我的index.php文件中，有一个开关案例，当您单击菜单中的“主页”时，它会加载页面“主页”。（示例）

但我不想那样。因为它们也是侧边栏中的聊天，每次加载不同页面时都会重新加载/重置。因此，所有以前的消息都将消失。所以我只想改变主要的内容部分。所以页眉、边栏和页脚将保持不变，不会重新加载

我试着用javascript来做，但没用。。。 有人能帮我或至少让我走上正确的道路吗

---

（是的，我在stackoverflow和google上搜索了最后一个小时，但没有找到任何东西…

请按照以下说明操作：

为页眉、页脚、边栏和内容文件创建单独的.tpl文件

在主文件中包括页眉、页脚、侧边栏和左一部分内容。 3.使用ajax调用替换.tpl（使用id或类）文件内容

使用函数绑定url

示例代码如下：

//sidebar.php

    <ul>
    <li><a onclick="changePage(this)" data-page="home.tpl">Home</a></li>
    <li><a onclick="changePage(this)" data-page="aboutus.tpl">About Us</a></li>
    </ul>

家
关于我们

//master.php

     <?php 
           include("header.php");
           include("sidebar.php");
          ?>
           <section id="fileContent">
           </section>
        <?php   include("footer.php");
         ?>
<script href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script>
         function changePage(obj)
         {
            var Filename=$(obj).data('page')
            $.get(Filename, function( data ) {
               $( "#fileContent" ).html(data);
             });
         }
    </script>

功能更改页（obj）
{
变量文件名=$（obj）.data（'page'））
$.get（文件名、函数（数据）{
$（“#文件内容”）.html（数据）；
});
}

---

您需要的是AJAX（使用AJAX，web应用程序可以异步（在后台）向服务器发送数据和从服务器检索数据，而不会干扰现有页面的显示和行为。）

要使用ajax，您需要Javascript将请求发送到一个PHP文件，该文件加载包含主要内容的smarty模板，并将html代码插入页面：

<?php
//some-php-file.php
include("Smarty.class.php");
$smarty = new Smarty;
$smarty->display("main_content_part.tpl");
?>

---

也许你正在寻找太多可能的答案，或者好的答案对于这种格式来说太长了。请添加详细信息，以缩小答案集或隔离可以在几段中回答的问题。我建议你找一个发展论坛（也许？）来概括一下。然后，当/如果您有特定的编码问题，请返回StackOverflow，我们将很乐意提供帮助。即使您的页面是从TPL呈现的，也仍然需要向后端发出请求，以重新加载整个页面。简单回答：iframes（但请不要）。您将需要通过JavaScript异步获取内容的东西。对于那些非常严肃的应用程序，请考虑或类似，但这对你来说可能是多余的。好吧，侧栏实际上是我的网站上的聊天。因此，我想您在“sidebar.php”中的菜单应该在“header.php”中。你能解释一下为什么在锚中“changePage”之后会出现（这个）吗。因为我在你的“master.php”中看不到（这一点）。我会关闭jQuery

on

delegational的内联点击处理程序。所以如果你想让链接被SE爬网，请不要忘记将真实页面

href

添加到链接中。@fence我已经将其创建为演示sturcutre。你需要调用菜单链接点击上的函数。我使用“this”关键字是因为我们可以确定要单击哪个href wolud，并且可以更改相应的.tpl文件。您可以签入changePage函数，我们正在获取$（obj）.data（'page'），它返回href click的页面名称。@HarshPatel我已经尝试了您的代码，但它没有将内容文件中的数据传递到“fileContent节”。它只在我的url后面加了一个#。请改变一下，

AJAX对我来说是很新的，我对此一无所知，所以我怀疑我自己能实现它…@fence这很容易，别担心。第三部分做的是获取smarty模板的内容（主内容部分），并将其插入到带有类“main content”的html标记中。@b3wii我获取该部分，但smarty是什么？我明白了：include（“Smarty.class.php”）；那么php文件中应该包含什么？@fence您刚才说的.tpl文件通常用作Smarty文件扩展名。如果您不使用Smarty，那么您可以忽略第一部分并将$.get指向您的php tpl文件
//link on 'home' site
<a href="#" id="ajaxHomeBtn">Home</a>

//javascript(jquery) ajax request
$('#ajaxHomeBtn').click(function(e){
  e.preventDefault();
  $.get("some-php-file.php", function(smarty_html_data) {
    $(".main-content").html(smarty_html_data);
  });
});