php中的靜態頁眉佈局

我想知道如何在不刷新頁眉的情況下重新加載內容。我在下面創建了一個小樣本代碼。php中的靜態頁眉佈局

的header.php

<html> 
    <head> 
    </head> 
    <body> 
     <ul> 
     <li><a href="index.php">Home</a></li> 
     <li><a href="index2.php">News</a></li> 
     </ul>

的index.php

<?php 
     include("header.php"); 
    ?> 
    <div> 
    This is contents 1 
    </div> 
    </body> 
</html>

index2.php

<?php 
     include("header.php"); 
    ?> 
    <div> 
    This is contents 2 
    </div> 
    </body> 
</html>

我認爲指數index2頁面作爲內容頁面。

當我點擊主頁或新聞鏈接時，內容頁面會加載，但每次點擊時也會刷新header.php。

我想知道，如何加載內容頁面時，請點擊首頁鏈接時不帶新鮮的header.php。

任何想法用php或javascripts做到這一點？

來源

2016-08-12 sj2012

恭喜它也有效。如果你能接受我的答案，它也會幫助我：D，試圖建立一個可以信任的賬戶:) –

主要編輯

使用@米希爾的代碼。我想出了一個工作樣本。

的index.php

<html> 
    <head> 
    </head> 
    <body> 
    <?php include 'header.php'; ?> 
    <div id="content"> 
    </div> 
    </body> 
    <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> 
    <script> 
    function go_to_home() 
    { 
     $('#content').load('home.php'); 
     return false; 
    } 

    function go_to_news() 
    { 
     $('#content').load('news.php'); 
     return false; 
    } 
    </script> 

</html>

的header.php

<div> 
    <ul class="navbar"> 
    <button onclick="go_to_home();">home</li> 
    <button onclick="go_to_news()">News</li> 
    </ul> 
</div>

home.php

<div> 
    <p>I am at home</p> 
</div>

news.php

<div> 
    <p>This is my news</p> 
</div>

現在這個工作！：D

來源

2016-08-12 04:52:59

感謝你的想法，@洛倫佐馬格諾。我沒有得到它。如果你能提供一個小例子，我可以通過它。 – sj2012

沒問題，我會在一段時間內添加一段代碼來幫助你。 –

我感謝你的幫助@Lorenzo Magno。我知道了。如果它不打擾你。我還有一個問題。我已經開發了一個網站。所以它有幾個外部的PHP文件。那麼，還有其他方法可以調用外部php文件嗎？ – sj2012

你必須使用AJAX來處理這種事情。你想要做的是SPA（單頁應用）。儘管可以使用簡單的AJAX請求來構建自己的SPA以獲取部分視圖，但我建議您學習React或Angular。

爲了達到預期效果，您可以在簡體中文中使用簡單的XHR JavaScript，或者您可以使用jQuery的$.ajax,$.post,$.get。如果你選擇jQuery，你會在整個應用程序中使用這種方法。

Master.php文件 -

<html> 
    <head> 
    </head> 
    <body> 
    <?php include 'header.php'; ?> 
    <div id="content"> 
    </div> 
    </body> 
    <script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script> 
    <script type="text/javascript" src="main.js"> 
</html>

content.php -

<div> 
    <p>Content 1 goes here</p> 
</div>

報頭。PHP -

<div> 
    <ul class="navbar"> 
    <li id="home">home</li> 
    <li id="content">content</li> 
    </ul> 
</div>

main.js -

$(document).ready(function() { 
    $.ajax({ 
    url: "content.php", 
    cache: false 
    }) 
    .done(function(html) { 
    $("#content").html(html); 
    }); 
});

這只是它是如何工作的總體思路。我沒有測試過這些代碼，請不要期望它能夠運行。您需要在導航欄中的鏈接上使用onclick偵聽器來調用AJAX並呈現正確的局部視圖。

來源

2016-08-12 05:08:42 Mihir

+1，這是我正在處理的代碼。雖然他沒有測試代碼，但我認爲@sj2012會得到它的要點。 –

@LorenzoMagno是的。它沒有經過測試，也沒有完成。但它肯定會給sj2012一個努力的方向。 – Mihir

@Mihir我試過了，但它不起作用，我對ajax不是很熟悉 – sj2012

php中的靜態頁眉佈局

回答

相關問題