Как загрузить страницу html в div с помощью AJAX и JQuery

Я пытаюсь загрузить HTML-страницу в div с помощью AJAX. У меня есть следующий кодКак загрузить страницу html в div с помощью AJAX и JQuery

<!DOCTYPE html> 

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 

</head> 
<body> 
    <div id="wrapper"> 
     {% include "header.html" %} 

     <div id="content"> 

      <div class="jumbotron"> 
       <div class="container"> 
        <h2 class="text-center">MOMENTEEL IN VOLLE ONTWIKKELING</h2> 
     {% block content %}{% endblock %} 
       </div> 
      </div> 

      <button>Toon de Screenshots!</button> 

      <div id="loadHere"></div> 
    </div> 

    <div class="push"></div> 
    <a href="#" class="back-to-top hidden-sm hidden-xs"><span class="glyphicon glyphicon-chevron-up pull-right top"></span></a> 


    {% include "footer.html" %} 

</div> 




<script src="../static/js/bootstrap.js"></script> 
<script src="../static/js/jquery-extra.js"></script> 

<script> 
$(document).ready(function(){ 
    $("button").click(function(){ 
     $.get('screenshots.html').success(function(data) 
{ 
    $('#loadHere').html(data); 
}); 
    }); 
}); 
</script> 


</body>

Не против кода Django (Python рамки). Когда я нажимаю на кнопку, она должна отображать страницу screenshots.html в div, но это не так ... Вместо этого загружает текущую страницу. Я также пробовал функцию загрузки, но без успеха. Дополнительная информация: Я запускаю свой django-сайт на localhost.

Screenshots.html код:

<div class="container"> 
       <div class="push"></div> 
       <div class="page-header"> 
        <h2>Screenshots</h2> 
       </div> 
       <div class="row"> 
       <div class="col-md-3 col"> 
         <img src="../media/Shopping-list/2014-09-02 10.08.11.png"/> 
        </div> 
        <div class="col-md-3 col"> 
        <img src="../media/Shopping-list/2014-09-02 10.08.17.png"/> 
       </div> 
       <div class="col-md-3 col"> 
        <img src="../media/Shopping-list/2014-09-02 10.08.31.png"/> 
       </div> 
       <div class="col-md-3 col"> 
        <img src="../media/Shopping-list/2014-09-02 10.08.40.png"/> 
       </div> 
      </div> 

     </div>

источник

2015-02-21 gillesC

Похоже, он должен работать. Посмотрите на инструменты разработчика вашего браузера. Посмотрите на консоль JavaScript. Сообщает ли он о каких-либо ошибках? Посмотрите вкладку «Сеть». Выполняется ли запрос? Получает ответ? Они содержат данные, которые вы ожидаете? Посмотрите на инспектора DOM, добавлен ли HTML в DOM? (Возможно, изображения просто не загружаются) – Quentin

Спасибо за быстрый ответ! Выполняется запрос, но я получаю сообщение в консоли: @Quentin Синхронный XMLHttpRequest в основном потоке устарел из-за его пагубных последствий для конечного пользователя. Для получения дополнительной информации посетите http://xhr.spec.whatwg.org/. Но я получаю также сообщение: XHR finished loading: GET .... – gillesC

Попробуйте '$ .load()' вместо '$ .get()'. Знаете ли вы, что оба (а также '$ .post()' [являются лишь короткими формами метода $ .ajax() ') (http://stackoverflow.com/questions/3870086/difference-between-ajax- и-get-and-load)? – gibberish

Проблема действительно с Django-рамки. Мое решение:

В view.py моего приложения я добавил следующий код DEF current_page:

if request.is_ajax(): 
     return render_to_response("screenshots.html", 
           locals(), 
           context_instance=RequestContext(request) 
          )

current_page страница, на которой находится кнопка, в моем случае это Защиту магазин (запрос) (shopping-list.html). Итак, когда у меня есть запрос ajax с этой страницы, он дает screenshots.html в качестве данных. Это не оптимальный способ сделать это, но он работает! : D

Мой JQuery скрипт:

<script> 
$(document).ready(function(){ 
$("button").click(function(){ 
    $('#loadHere').load('screenshots'); 
    }); 
}); 
</script>

источник

2015-02-22 13:33:51 gillesC

После комментария обсуждения, появляется проблема связана с базой или другим кодом, как урезанный код размещен выше работает удовлетворительно когда Джанго, бутстрап и JQuery-EXTRA. js были удалены.

Источники:

Selector load vs get

источник

2015-02-21 22:55:11 gibberish

Я пробовал оба ваших ответа, но он по-прежнему загружает текущую страницу shopping-list.html вместо screenshots.html. – gillesC

Я воспроизвел ее точно на моем конце, удалив загрузочный и jquery-дополнительный материал и кажется, что это работает. [Попробуйте это.] (http://cssyphus.com/cv/sotest.php) – gibberish

На самом деле я хотел сказать, что ** ваш исходный код **, похоже, работает. – gibberish

Как загрузить страницу html в div с помощью AJAX и JQuery

ответ

Смежные вопросы