包括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來實現這一點，所以我建議看一看。我的版本的唯一好處是你不必打電話來包含庫（儘管它很簡單）。