使用jQuery創建服務器端包括

Question

我想使用jQuery來創建服務器端包含，但我想創建一個方法來基於插入的元素的「title」屬性自動生成內容，如：

<div class="js-include" title="nav.html"></div> 
<div class="js-include" title="table.html"></div> 

這樣一個腳本可以用來生成多個內容元素。

內容文件存儲在與基本文件相同的文件夾中。這裏是我嘗試使用該腳本，但它不工作：

<script> 
$(".js-include").each(function(){ 
    var inc=$(this); 
    $.get(inc.attr("title"), function(data){ 
     inc.replaceWith(data); 
    }); 
}); 
</script> 

Answer 1

嘗試包裹代碼$(document).ready()像這樣

<script type="text/javascript> 
$(document).ready(function(){ 
    $(".js-include").each(function(){ 
     $(this).load($(this).attr("title")); 
    }); 
}); 
</script> 

如果還是不行，請務必檢查瀏覽器的網絡/錯誤控制檯的HTTP錯誤。

Answer 2

嗯，我想我明白你想做些什麼。你想用jQuery加載nav.html並將其內容放入該div中？

爲什麼你不從服務器端做到這一點？如果這些div是在服務器端創建的，那麼服務器在頁面加載期間知道它們在那裏是需要的，並且可以包括它們，而不是讓它來處理JS。

我不知道如何使用jQuery加載nav.html，也許是一些AJAX/HTTP代碼。但是一旦你在一個變量上使用它，你可以使用element.innerHTML將任何HTML文本存儲到一個DOM元素中。

但是，而不是讓服務器設置一個特定的類，並將數據添加到某些元素的標題屬性（當然，沒有考慮服務器端處理包含的更好的方法），我會給這些元素一個id。然後，在HTML文檔的底部，我會打印一個JSON數組來保存這些ID以及如何處理它們（例如將文件加載到它們中）。

然後在一個JS文件中，我接受該數組，然後循環並根據需要處理其數據。

編輯：我從來沒有做過這樣的事情，你必須運行它來測試任何sxyntax erros。

<?php 
$fileslinks = array(
    array(
     'id'  => 'id1', 
     'filename' => 'file1.html' 
    ), 
    array(
     'id'  => 'id2', 
     'filename' => 'file2.html' 
    ), 
    array(
     'id'  => 'id3', 
     'filename' => 'file3.html' 
    ) 
); 
?> 

<div id='id1'></div> 
<div id='id2'></div> 
<div id='id3'></div> 

<script> 
    var fileslinks = <?php echo json_encude($fileslinks); ?>; 

    fileslinks.forEach(printFiles); 

function printFiles(element, index, array){ 
    var fileContent = // load from element.filename 
    document.getElementById(element.id).innerHTML = fileContent; 
} 


if(!Array.prototype.forEach){ 
    Array.prototype.forEach = function(fun){ 
     var len = this.length; 
     if(typeof fun != "function") 
      throw new TypeError(); 

     var thisp = arguments[1]; 
     for(var i = 0; i < len; i++){ 
      if(i in this) 
       fun.call(thisp, this[i], i, this); 
     } 
    }; 
} 

</script> 

Answer 3

我可能會推薦你使用data- *屬性而不是title =「...」。我想我會在這裏更有意義。此外，你不需要replaceWith甚至得到，jquery有一個ajax超載來幫助你。

<div class="js-include" data-page="nav.html"></div> 
<script> 
$(function() { 
    $(".js-include").each(function() { 
     $(this).load($(this).data('page')); 
    }); 
}); 
</script>