AJAX加載內容而無需刷新頁面

Question

我正在嘗試加載內容而不刷新頁面。 問題是我做到了，但是沒有加載圖像文件和CSS文件。

這是我的代碼：

<script>
            $(function(){
                $('.link').click(function(){
                    var page=$(this).attr('value');
                    console.log(page);

                $('#display').load(page);
                });
            })
      </script>

<select >
         <option value="#">Home</option>
         <option value="../myProjects/Aion-Paradise/index.html" class="link">Aion-Paradise</option>
         <option value="../myProjects/L2illusions/index.html" class="link">L2 Illutions</option>
         <option value="../myProjects/l2sold/index.html" class="link">L2 Sold</option>
         <option value="../myProjects/TemplateID1/index.html" class="link">Template 1</option>
         <option value="../myProjects/TemplateID2/index.html" class="link">Template 2</option>
    </select>

<p><br>
<div id="display"></div>

它加載HTML文件，但不加載圖像和CSS文件的所有內容。 任何想法？ 提前致謝。

Answer 1

當您調用.load（）命令時，它將呈現所選頁面中的html。 檢查渲染的源代碼，並確保css和image鏈接對於要在其上渲染的頁面正確。

編輯：在您的html文件中，您可能具有如下圖像：

<img src='../myimage.gif' />

如果直接在瀏覽器中轉到html文件，則可能會很好，但是當頁面在div中呈現時，src可能更像這樣：

<img src'myimage.gif' />

這一切都取決於您如何布置文件夾結構以及圖像/ css文件相對於頁面的位置。

Answer 2

您必須將此代碼的“ value”屬性更改為“ href”

 $(function(){ $('.link').click(function(){ var page=$(this).attr('value'); console.log(page); $('#display').load(page); }); }) 

這個代碼

 $(function() { $('.link').click(function() { var page = $(this).attr('href'); // 'href' contains your url console.log(page); $('#display').load(page); }); })