單擊nav-element，將新的content / file.php加載/包含在div id =“ include”中

Question

我正在尋找將php文件中的某些內容加載到頁面div中的最佳方法（快速，不需要很多性能，易於理解等）。

我不知道使用php或javascript是否更好？ 如果是javascript，我認為不需要jquery，對嗎？

該解決方案應為100％有效（w3c，jshint等）。

在首頁加載時：應加載一些特定的包含文件，還是僅顯示div的原始內容？

單擊導航鏈接時，不應重新加載整個頁面，而應重新加載div /替換div的內容。

（沒關系，已加載/包含的文件名是什么，所以我不希望只加載名稱為file_1.php ... file_9.php的文件的解決方案。）

這些文件中也只包含純HTML，就像我直接將其寫入html文件的div中一樣。

應該包含的文件例如是about.php，contact.php，services.php ...

我的html / php文件如下所示：

<html>
</html>
<body>
  <div id="container">
    <div id="nav">
      <ul>
        <li><a href="imports/some_name.php">...</a></li>
        <li><a href="imports/something_else.php">...</a></li>
        <li><a href="imports/well_whatever.php">...</a></li>
      </ul>
    </div>
    <div id="content">
      <div id="include">
      </div>
    </div>
  </div>
</body>

Answer 1

我認為在div中引導內容的最好方法是使用jQuery。 它將與主要的瀏覽器兼容，並且易於實現。

實際上，我在我的一個應用中使用了此解決方案

$(document).on('click', '#nav a', function(event) {
    var url = $(this).attr('href');
    $.ajax(url).done(function(response, status) {
        if (status !== "error")
        {
            $("#include").html(response);
        }
    });
    event.preventDefault();
});

說明：

$（document）.on（' event '，' filter '， handler ）是一個將處理函數綁定到每個由' filter '過濾的' event '的函數。

（有關更多信息，請參見jQuery Documentation .on（））

在處理程序內部，我使用一個名為.ajax（）的jQuery函數，該函數接收一個URL作為參數（以及一些必要的選項），並使用defered.done（）調用一個回調函數。

此回調如jQuery文檔中所述接收響應數據，狀態字符串和xhr對象。 （在這種情況下，我們不使用xhr對象，那么我們可以將其從函數中刪除）

首先，我檢查狀態是否不是錯誤。 然后，我選擇“ #include”元素（jQuery使用類似選擇器語法的css），並使用html函數將響應放入內部#include div。

最后，我使用event.preventDefault（）來避免瀏覽器嘗試遵循鏈接。

但是，如果要使用純JavaScript，則將需要處理不同的瀏覽器行為，並且需要很長時間才能獲得100％兼容。

單擊nav-element，將新的content / file.php加載/包含在div id =“ include”中

問題描述

1 個解決方案

解決方案1
1 2014-03-28 14:17:18

單擊nav-element，將新的content / file.php加載/包含在div id =“ include”中

問題描述

1 個解決方案

解決方案1 1 2014-03-28 14:17:18

解決方案1
1 2014-03-28 14:17:18