jQuery + AJAX動態div內容

Question

我正在嘗試創建一個動態網頁來顯示某些內容並對其進行更改，而不重新加載整個頁面的一部分。

當我按下導航欄的按鈕時，它會調用JavaScript函數來更改div標簽的內容

<div class="row text-left" id="center"></div>

使用此代碼，我在div類中添加了一些文本

$('#navHome').click(function(){
    $('#center').html("this is my home");
});

現在，我想存儲每個部分的內容，以便在每次按下按鈕時重新加載。 像這樣：

$('#navHome').click(function() {
   $.get('home.txt', function(data) {
      $("#center").html(data);
   }, 'text');
});

在home.txt中，我已經存儲了我的home部分的html代碼，但是我不知道該如何做。

Answer 1

嘗試：

刪除您在ajax最后添加的“文本”

$('#navHome').click(function(){
   $.get('home.txt', function(data) {
      alert(data);
      //process text file line by line
      $('#center').html(data);
   });
});

Answer 2

我會盡力給你一個答案，首先要對我的英語不好對不起。

對於您的情況，我的第一個建議是使用AngularJS或它設計用來創建SPA（簡單頁面應用程序）的任何類似框架，這基本上意味着您想要的內容，一次加載整個頁面，並且僅在用戶使用時更改頁面的某些部分要求它。 它還具有許多功能，可幫助您更快更干凈地進行編碼。

現在，如果您現在不想學習angular，我將在簡單的jquery上寫一些代碼：)

function includeURL(idObj,url){
   var r=$.Deferred();  
   $(document).ready(function() {
      $(idObj).load(url, function() {
          return r.resolve();
      });
   });
}

我使用此函數來加載部分代碼，idObj是要在其中加載內容並為內容的路徑添加URL的div。 例如：

includeURL('#myDiv','html/path/to/content.html');

試試看，告訴我您是否有任何問題。

希望能幫助到你！

Answer 3

假設home.txt文件的內容可以直接放入<div />元素（即純文本或HTML），請查看jQuery中的.load() 函數

$('#center').load('home.txt', function() {
  // This function is called when the contents are loaded successfully
});

因此，您的點擊處理程序將如下所示：

$('#navHome').click(function() {
    $('#center').load('home.txt');
});

確保home.txt在正確的目錄中。 如果內容加載不正確，開發人員工具中適用於所有優質Web瀏覽器的“聯網”標簽將幫助您調試問題

Answer 4

嘗試使用以下代碼：

 $.ajax({ url: "home.txt", dataType: "text" }) .done(function( data ) { $("#center").replaceWith(data); }); 

要替換所有div內容，請使用replaceWith（data）方法。 使用$ get方法將得到相同的結果，但是必須將dataType分配為'text'；