在主頁面中動態加載PHP

當談到PHP和AJAX時，我非常新，所以我一直在遇到問題，並且在爲網頁搜索想法之後，我簡單地提出了一些問題。我正在尋找一種方法來在一個主頁上動態加載內容（PHP/HTML混合）。主頁面將包括導航，並且一旦點擊此導航中的鏈接，主內容div中的內容將改變。很簡單，對，但是我一直是這個話題上的一個大斗爭巴士。在主頁面中動態加載PHP

我迄今爲止最喜歡的方法是使用HTML5 History API的CSS-Tricks Rethinking Dynamic Page Replacing Content。我喜歡它允許使用後退和前進瀏覽器按鈕，但我無法在Chrome中使用它。

這不是你典型的「幫我弄清楚我的代碼有什麼問題」的問題，所以我提前道歉。大多數情況下，我正在尋找一些關於如何最好地找到解決這個問題的建議。

來源

2013-02-12 Harlow

使用jquery。研究http://jqfundamentals.com/chapter/jquery-basics和http://www.w3schools.com/jquery/jquery_examples.asp。你將能夠申請jqeury。 – ripa 2013-02-12 06:49:35

這可以用AJAX來完成，你需要一個內容/視圖/頁錨來確定內容加載的東西，那麼你可以用它來從你的PHP加載內容，

繼承人的jQuery的代碼片段使用#hash確定的內容，所以http://example.com/#home會做$_POST['view']='home'

$(function(){ 
    // Detect hashchange (browser back/forward buttons) 
    $(window).bind('hashchange', function() { 
     load_content(); 
    }); 
    // Init content 
    load_content(); 
}); 

function load_content(){ 
    //get the hash 
    var page = window.location.hash; 
    page = page.substring(1); 
    if(page == ''){ 
     page='home'; 
    } 

    //get the content, replace any - with/so php can route to sub actions ect 
    $.post("./", { 'view': page.replace("-","/") }, 
    function(data) { 
     //load the content into the load container 
     $("#load").html(data).fadeIn('slow'); 
    }); 
} 

<div id="load"></div>

一個Ajax請求，然後你就可以簡單地找到PHP內腳本路徑：

$route  = explode('/',$_POST['view']); 
$controller = (!empty($route[0])) ? $route[0] : null; 
$action  = (!empty($route[1])) ? $route[1] : null;

來源

2013-02-12 06:57:39

你可以在這裏看到一個演示[here]（http://beta.cre8tionsurf.com）用這種技術，你必須啓用JavaScript。 – 2013-02-12 07:03:36

跟着阿賈克斯走......幾周前我也遇到了類似的情況。我對此並不瞭解，但本網站相當有幫助： http://www.w3schools.com/ajax/ajax_example.asp

它有簡單的示例，可以幫助您瞭解通話的工作方式。我希望它有幫助。由於你沒有解釋你的申請，所以很難給出更具體的建議。

來源

2013-02-12 06:58:11 Clarissa

下面是一個簡單的例子來讓你明白：

製作的導航鏈接的點擊Ajax調用，

<p id="test">CLICK ME</p> 

<p id="result">Your result</p>

腳本標記內

Ajax代碼如下：

$(document).ready(function() { 

$("#test").click(function(){ 

    $.ajax({ 
     url : 'testing.php', 
     type : 'GET', 
     async : 'true', 
     cache : 'false', 

     success : function(data, textStatus, xhr) 
     { 
      $('#result').empty().html(data); 
     }, 
    }); 

}); 
});

注意：ajax調用url可以是php或html頁面，甚至是文本文件，您可以在主頁上顯示結果。

來源

2013-02-12 07:04:32

在主頁面中動態加載PHP

回答

相關問題