包含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的page...sorry

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请求和另一个"module 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- Ok。首先，你应该在没有js和jquery的情况下让所有的东西都能正常工作。机器人不会通过浏览器爬行，它们只是获取源代码并在代码中爬行。(假设你关心搜索引擎优化)

1-为菜单链接添加一个额外的属性(在本例中，我添加了rel属性)。这个属性的值是模块参数值。

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，所以我建议看看这个。我的版本唯一的好处是你不需要调用就可以包含这个库(尽管它很容易做到)。