Question

我是新来的，所以我想更具体，因为可能XD确定让我们开始：

我用div + css创建了一个模板，并且用php创建了一个脚本，其中包含一个文件，你可以从菜单中调用链接“index.php？modul = modulename”这是代码：< / p>

<div id="contenuto"><br />
<?php
if(empty($_GET["modul"]) && empty($_GET['userpanel'])) {
        require('moduli/news.php');
            }
        elseif (file_exists("moduli/" . $_GET['modul'] . ".php")) {
        include("moduli/" . $_GET['modul'] . ".php");}
         elseif (file_exists("moduli/userpanel/" . $_GET['userpanel'] . ".php")) {
        include("moduli/userpanel/" . $_GET['userpanel'] . ".php");
       }else{
      include("moduli/404.php");
    }
?>
<br />
</div>

所以...当我点击一个菜单链接时，它会包含特定模块而不刷新页面...对不起我的英文不好xD

Answer 1

假设这是您的菜单链接列表：

<ul id="menulist">
  <li><a href="index.php?modul=mod1" rel="mod1">Module 1</a></li>
  <li><a href="index.php?modul=mod2" rel="mod2">Module 2</a></li>
  <li><a href="index.php?modul=mod3" rel="mod3">Module 3</a></li>
  <li><a href="index.php?modul=mod4" rel="mod4">Module 4</a></li>
  <li><a href="index.php?modul=mod5" rel="mod5">Module 5</a></li>
</ul>

您可以通过简单的jquery请求和另一个“模块浏览器”php文件来实现您所需要的：

<script>
    $(document).ready(function(){
        $('#menulist li a').click(function(e){
            e.preventDefault(); // This will prevent the link to work.
            $('#contenuto').load('module_bringer.php?mod=' +  $(this).attr('rel'););  // You get the moule from rel attribute
            // You should keep the actual link so bots can crawl.
        });
    });
</script>

详细说明编辑

0 - 好的首先，你应该让一切都继续工作，没有js和jquery。机器人不会通过浏览器抓取，只需获取源代码并抓取代码即可。（假设你关心seo）

1 - 为菜单链接添加一个额外的属性（在这种情况下，我添加了rel属性）。此attr的值是模块参数值。

2 - 包含jquery库（如果之前未包含 - 可以从here下载。

3 - 你可以使用我写过的第二个代码部分。您只需要更改触发部分即可。在jquery代码中$('#menulist li a').click在第一个代码块中的解释菜单项时被触发。您必须根据菜单结构更改此设置。这部分是制作httprequest并将结果放入#contenuto div的部分。

4 - 您需要创建另一个文件来包含将成为jquery httprequest的目标文件的内容。（在这种情况下，我将其命名为module_bringer.php）。内容应该是这样的：

<?php
    // You probably need to include some files here like db connection, class definitions etc.
?>
<br />
<?php
if(empty($_GET["modul"]) && empty($_GET['userpanel'])) {
        require('moduli/news.php');
            }
        elseif (file_exists("moduli/" . $_GET['modul'] . ".php")) {
        include("moduli/" . $_GET['modul'] . ".php");}
         elseif (file_exists("moduli/userpanel/" . $_GET['userpanel'] . ".php")) {
        include("moduli/userpanel/" . $_GET['userpanel'] . ".php");
       }else{
      include("moduli/404.php");
    }
?>
<br />

Answer 2

要在没有页面刷新的情况下实现新功能，您需要使用ajax。我建议使用jQuery库。

您需要拨打jQuery.ajax或load等功能。这两个函数都将url作为第一个参数，可以是PHP页面。

Answer 3

您希望链接看起来像<a href="#" onClick="getPage(module_name)>link text</a>。将module_name替换为您希望每个链接获取的模块名称。 Ajax就是关于javascript的“xmlHttpRequest”。

function getPage(modul){

    // This will create the XmlHttpRequest in modern browsers
    if(window.XMLHttpRequest){
        xmlhttp=new XMLHttpRequest();                   
    }
    // This will create the XmlHttpRequest in older versions of Internet Explorer
    else{
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

    // This is how you tell the script what to do with the response from the request
    xmlhttp.onreadystatechange=function()
    {
        if(xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById("contenuto").innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET", "moduli.php?modul="+modul, true);
    xmlhttp.send();
}

在此示例中，您需要另一个文件moduli.php来接收xmlhttp请求并包含正确的文件。它可能看起来像这样。

$modul = $_GET['modul'];

include('moduli/'.$modul.'.php');

这是通过AJAX实现这一目标的第一种方式，但我不是老手，所以可能有一种更简单的方法。

编辑：其他人使用jQuery以更简单的方式做出回应，所以我建议看一下。我的版本的唯一好处是你不必调用包含库（尽管它很简单）。

包含PHP，使用ajax加载页面（不刷新页面）

3 个答案: