jquery - 如何编写一个 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 View (它拦截/load/feed/2 )查询数据库并返回:

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

friend_reviews 和 global_reviews 都是 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);
      });
                                   });
});