包括PHP,使用Ajax加载页面(不刷新页面)
我是新来的,所以我想更具体的不可能性XD OK,让我们开始:包括PHP,使用Ajax加载页面(不刷新页面)
我创建了一个模板,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
比方说,这是你的菜单链接列表:
<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 />
你会想要的链接看起来像<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来实现这一点,所以我建议看一看。我的版本的唯一好处是你不必打电话来包含库(尽管它很简单)。
请检查vaiables的内容,以便您在$ _GET ['modul']为“../../../../var/spool/ftp/pub/incoming/free_virus_scan”时准备好或类似的。 –