Как я могу написать функцию AJAX, которая будет загружать HTML в два разных DIV?

Question

Я использую Django и AJAX в проекте, где я создаю ленту действий.Как это работает, мы показываем как активность друзей, так и глобальную активность.Вот как выглядит мой HTML:

<div>
  {% include "friend_reviews.html" %}
  <div id="load-friends"></div>
</div>
<div>
  {% include "global_reviews.html" %}
  <div id="load-global"></div>
</div>
<a id="load-more" href="/load/feed/2">
  Load More
</a>

Я хочу написать функцию jQuery AJAX, которая будет загружать дополнительные обзоры в # load-friend и # load-global. Следовательно, янаписал представление Django (которое перехватывает / load / feed / 2), которое запрашивает базу данных и возвращает:

context = {'friend_reviews': friend_reviews, 'global_reviews': global_reviews'}

И friend_reviews, и global_reviews являются наборами QuerySets объектов Review.Если вы подключите friend_reviews к частичному шаблону friend_reviews.html, он сгенерирует соответствующий HTML-код на странице.

Однако я не настолько знаком с jQuery и не знаю, как лучше всего создать правильныйHTML.Я слышал о Taconite, но в Python нет примеров, поэтому любая помощь будет принята с благодарностью.

Answer 1

Включите библиотеку jquery в заголовок вашей страницы.

Затем, это сделает работу:

$(document).ready(function(){   
    $.get("friend_reviews.html",function(data){     
            $('#load-friends').html(data);
      });
    $.get("global_reviews.html",function(data){     
            $('#load-global').html(data);
      });
});

Если вы хотите сделать это, нажав на ссылку, вы можете использовать следующие

// html
<a id="load-more">Load More</a> 

// Javascript
$(document).ready(function(){
    $('#load-more').click(function(){
    $.get("friend_reviews.html",function(data){     
            $('#load-friends').html(data);
      });
    $.get("global_reviews.html",function(data){     
            $('#load-global').html(data);
      });
                                   });
});

Answer 2

Если вы используете jQuery, то с $ (селектором) .load (url) это еще проще.

$(document).ready(function(){
  $('#load-more').click(function(){
    $('#load-friends').load("friend_reviews.html");
    $('#load-global').load("global_reviews.html");
    return false;
  });
});

Было бы эффективнее вернуть все, что вам нужно, в одном (Ajax) запросе:наличие / load / feed / 2 рендеринга JSON, содержащего требуемый html.

Сделать представление / load / feed / 2 возвращающим JSON:

context = {'friend_reviews': friend_reviews, 'global_reviews': global_reviews}
response_data = {'friend_reviews': render_to_string('friend_reviews.html', context),
                 'global_reviews': render_to_string('global_reviews.html', context)}

return HttpResponse(json.dumps(response_data), mimetype="application/json")

Тогда ваш javascript может быть:

$(document).ready(function(){
  $('#load-more').click(function(){
    $.getJSON($(this).attr('href'), function (data) {
      $('#load-friends').html(data.friend_reviews);
      $('#load-global').html(data.global_reviews);
      });

    return false;
  });
});

Вы должны позаботиться о том, чтобы ваш URL (/ load / feed / 2) теперь отображал JSON, поэтому, если вам нужно или вы хотите, чтобы он по-прежнему отображал HTML, вы можете добавить новый URL для JSON