Php 根据所选链接加载页面内容

我正在用PHP编写一个管理仪表盘。 为了简化事情，就我所认为的简化而言，我构建的页面除了菜单和主内容页面之外，还有典型的区域标题。当我单击旁边菜单中的其他页面时，主内容页应该会更改

因此，我创建了page index.php，它将保存页面的整个框架

<?php include('../includes/overall/overallHeader.php'); ?>

<section class="content-header">
    <h1>Einsatzliste</h1>
</section>

<script type="text/javascript">
    $('#pageIncidents').click(function(){
        $('#mainContent').load('incidents.php');
    });
</script>

<section class="content">
    <div id="mainContent">

    </div>
</section>

<?php include('../includes/overall/overallFooter.php'); ?>

我在其中创建了部分内容，并在id mainContent中给出了div。我的想法是，当我单击旁边菜单中的一个菜单项时，将不同的子页面加载到此div中：

旁白菜单

在那里，我将链接放在一个具有唯一ID的div中，我希望在jQuery中使用该ID来加载特定内容

jQuery脚本

脚本应该将页面events.php加载到index.php页面中的div mainContent中

---

它完全不起作用。。。你有什么线索可以找吗？我想逻辑似乎是对的。id PageEvents在代码中不是直接可见的，而是包含在页面顶部的php include overallHeader中，这可能是一个问题吗？

您可以尝试使用ajax进行此操作，并在单击start ajax request时以html字符串形式生成ajax响应

$(document).on("click", ".delete-asset", function() {
   var link = $(this).attr('[data-page]');
   $.ajax({
   type:'GET',
   url:'http://www.example.com/index.php',
   dataType: "json",
   data: { 
       action: 'incidents',
       data: { 'incidents': 'incidents' }
  },
 success:function(data) {
    $('#mainContent').html("[your data]");
}
});
});

---

内容会短暂出现，然后消失。单击链接后，您是否检查了浏览器控制台中的错误，并通过浏览器开发人员工具检查了文档结构？是。内容大致停留在那里一秒钟，然后从页面上消失。之后，我检查了页面，div容器是空的

<script type="text/javascript">
    $('#pageIncidents').click(function(){
        $('#mainContent').load('incidents.php');
    });
</script>

$(document).on("click", ".delete-asset", function() {
   var link = $(this).attr('[data-page]');
   $.ajax({
   type:'GET',
   url:'http://www.example.com/index.php',
   dataType: "json",
   data: { 
       action: 'incidents',
       data: { 'incidents': 'incidents' }
  },
 success:function(data) {
    $('#mainContent').html("[your data]");
}
});
});