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

Question

我是新来的，所以我想更具体些，因为XS好的，让我们开始：

我已经使用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请求和另一个“模块带来者” 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的情况下都能正常工作。 Bot不会通过浏览器进行爬网，它们只是获取源代码并通过代码进行爬网。 （假设您关心seo）

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

2-包含jquery库（如果您以前没有包含过-您可以从此处下载它）。

3-您可以使用我编写的第二个代码部分。 您只需要更改触发部分。 在jQuery代码$('#menulist li a').click ，当第一个代码块中的显示菜单项出现时，将触发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替换为您希望每个链接获取的模块名称。 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来完成此任务，因此我建议您看一下。 我的版本的唯一好处是，您无需调用就可以包含库（即使很简单）。