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视图（拦截/加载/ feed / 2））查询数据库并返回：

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

friend_reviews和global_reviews都是Review对象的QuerySet。如果您将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;
  });
});

通过使用/ load / feed / 2呈现包含所需html的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;
  });
});

您需要注意您的网址（/ load / feed / 2）现在呈现JSON，因此如果您需要或希望它仍然呈现HTML，您可能需要为JSON添加新网址

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

2 个答案: