Question

我现在正在用PHP编写管理仪表板。为了简化，我认为它简化了，我构建的页面有典型的区域标题，除了菜单和MainContent页面。当我单击旁边菜单中的其他页面时，主内容页面应该会更改。

所以我创建了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中：

旁边的菜单

<div class="navbar-default sidebar" role="navigation">
    <div class="sidebar-nav navbar-collapse">
        <ul class="nav in" id="side-menu">
            <li><a href=""><div id="pageIncidents">Einsatzliste</div></a></li>
            <li><a href="index.php">Testseite 1</a></li>
        </ul>
    </div>
</div>

我把链接放在一个带有唯一ID的div中，我想在jQuery中使用它来加载特定的内容。

jQuery脚本

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

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

它完全不起作用......你有提示在哪里找？我认为逻辑似乎正确。这可能是一个问题，即id＆＃34; pageIncidents＆＃34;在代码中没有直接显示但是包含在页面顶部的php include overallHeader？

Answer 1

您可以尝试使用ajax并在html（字符串）中组成ajax响应，然后单击启动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]");
}
});
});

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

1 个答案: