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

Question

我是新来的，所以我想尽可能具体一些 XD 好吧，让我们开始吧：

我用 div+css 创建了一个模板，并用 php 创建了一个脚本，其中包含您从菜单链接调用的文件与“index.php？modul = modulename”这是代码：

<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 请求和另一个“模块 Bringer”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 的情况下继续工作。机器人不会通过浏览器进行爬行，它们只是获取源代码并爬行代码。 （假设您关心搜索引擎优化）

1 - 为您的菜单链接添加一个额外的属性（在本例中我添加了 rel 属性）。该attr的值是模块参数值。

2 - 包含 jquery 库（如果您之前未包含过 - 您可以从此处下载它。3

-您可以使用我编写的第二个代码部分，您只需更改 jquery 代码中的 $('#menulist li a').click ，当 expample 菜单被触发时。的物品在第一个代码块中，您必须根据您的菜单结构更改此部分，该部分是生成 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 或 加载。这两个函数都将 url 作为第一个参数，可以是 PHP 页面。

Answer 3

您希望链接看起来像

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 来完成此操作，所以我建议看一下我的版本的唯一好处是您不必调用来包含该库（尽管这很简单）。