如何用JS包含文件覆蓋td內容？

Question

我有一個菜單，像這樣的不同的htm文件名稱：

我想，當我在一個點擊，一個TD的內容顯示，我剛纔點擊該文件，我有一個爲列出此名稱，並設置呼叫到JS功能：

<% for (int i=0; i < fileNames.length; i++) { %> 
    <tr> 
     <td onClick="refreshContent(this)"> <%= fileNames[i] %> </td> 
    </tr> 
<% } %> 

我使用一個JSP顯示的第一個文件的默認內容：

<td id="documentContaner"> 
    <%@ include file ="/docs/document1.htm" %> 
</td> 

我想這樣的事情在我的JS功能：

function refreshContent(element) { 
    var name = element.textContent; 
    var tdContaner = document.getElementById("documentContaner"); 
    tdContaner.innerHTML = '<%@ include file ="/docs/'+ name +'.htm" %>'; 
} 

第一個問題：是否有可能做這種方式？或者我是否需要刷新頁面才能顯示新內容？ 第二個問題：如果可能，我如何在TD中編寫包含文件？

Answer 1

您不能使用JavaScript將服務器端代碼插入到DOM中。服務器端代碼需要在結果傳遞給瀏覽器之前由服務器上的相應運行時/解釋器執行。

爲了實現這一類型的效果，你需要寫返回只是該單元格的內容的HTTP端點，然後（通常通過XMLHttpRequest對象）使用Ajax來獲取它，然後使用DOM方法將結果插入單元格中。

Answer 2

您可以從頁面發送Ajax加載文件

<script> 
    function refreshContent(element) { 
     var name = element.textContent; 
     var xhr= new XMLHttpRequest(); 
     xhr.open('GET', '/docs/'+ name +'.htm', true); 
     xhr.onreadystatechange= function() { 
      if (this.readyState!==4) return; 
      if (this.status!==200) return; // or whatever error handling you want 
      element.innerHTML= this.responseText; 
     }; 
     xhr.send(); 
    } 
</script> 
<table> 
    <tr> 
     <td onClick="refreshContent(this)">test</td> 
    </tr> 
</table> 

，如果你有你的頁面上的jQuery使用它

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> 
<script> 
    $(function() { 
     $('#table-id').on('click', 'td.clickable', function (event) { 
      event.preventDefault(); 
      var $element = $(this); 
      var name = $element.text(); 
      $.get('/docs/'+ name +'.htm', function (response) { 
       $element.html(response); 
      }) 
     }); 
    }) 
</script> 
<table id="table-id"> 
    <tr> 
     <td class="clickable">test</td> 
    </tr> 
</table> 

UPD。或預先加載的文件&名稱和顯示/隱藏他們

<script> 
    function refreshContent(element) { 
     var name = element.children[0]; 
     var file = element.children[1]; 
     name.style.display = 'none'; 
     file.style.display = null; 
    } 
</script> 
<table> 
    <tr> 
     <% for (int i=0; i < fileNames.length; i++) { %> 
    <tr> 
     <td onClick="refreshContent(this)"> 
      <div class="name"><%= fileNames[i] %></div> 
      <div class="file" style="display: none;"><%@ include file ="/docs/document1.htm" %></div> 
     </td> 
    </tr> 
    <% } %> 
    </tr> 
</table> 

與jQuery

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> 
<script> 
    $(function() { 
     $('#table-id').on('click', 'td.clickable', function (event) { 
      var $element = $(this); 
      var $name = $element.find('.name'); 
      var $file = $element.find('.file'); 
      $name.hide(); 
      $file.show(); 
     }); 
    }) 
</script> 
<table id="table-id"> 
    <tr> 
     <% for (int i=0; i < fileNames.length; i++) { %> 
    <tr> 
     <td class="clickable"> 
      <div class="name"><%= fileNames[i] %></div> 
      <div class="file" style="display: none;"><%@ include file ="/docs/document1.htm" %></div> 
     </td> 
    </tr> 
    <% } %> 
    </tr> 
</table>