如何编写一个AJAX函数，将HTML加载到两个不同的DIVs中？

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-全局。因此，我编写了一个Django视图(它拦截/load/feed/2)来查询数据库并返回：

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

friend_reviews和global_reviews都是Review的QuerySets。如果将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，那么使用$(selector).load(url)就更简单了。

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

通过包含所需html的/load/feed/2呈现JSON，返回一个(Ajax)请求中所需的所有内容将更加有效。

使/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，您可能希望为JSON添加一个新的url