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

Question

我是新来的，所以我想更具体的不可能性XD OK，让我们开始：

我创建了一个模板，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。机器人不会通过浏览器进行爬网，他们只是获取源代码并抓取代码。 （假设你关心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

为了实现ne w功能没有页面刷新，你将需要使用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来实现这一点，所以我建议看一看。我的版本的唯一好处是你不必打电话来包含库（尽管它很简单）。