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 и изображения верны для страницы, на которой они отображаются.

Edit: Внутри вашего HTML файла может иметь изображение, как так:

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

Это может быть хорошо, если вы идете прямо в HTML-файл в вашем браузере, но когда страница отображается внутри вашей ДИВ Пульт SRC может быть больше, как это:

<img src'myimage.gif' /> 

Это все зависит от того, как вы заложили, структуру папок и где ваши файлы изображений/CSS в зависимости от ваших страниц.

Answer 2

вы должны изменить "значение" атрибут "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); 
 
    }); 
 
})