Django + Ajax：发布后更新div [英] Django+Ajax: div update after post

问题描述

我是Ajax和Django的新手。我有一个像Ajax的按钮，为我的数据库添加喜欢。除了按钮之外，我的模板还显示了喜欢的总数。该按钮的工作原理，但我无法弄清楚如何更新喜欢计数div，因为调用 {{post.likes.count}} 显示旧的结果。我猜这是因为缓存？为了解决这个问题，我在我的视图中声明了一个like_count变量，然后在喜欢时添加+ = 1。

如何使我的模板中的 {{like_count}} 使用

  return render（request，'app / blog.html'，{'like_count'：like_count}）
  

将我发送到空白页，而不是更新div。

查看：

  @login_required 
 def like（request）：
 if request.is_ajax（） 
 user = request.user 
 post_id = request.POST.get（'post'，None）
 content = ContentType.objects.get_for_model（Post）
 like_count = Like.objects .filter（content_type = content，object_id = post_id）.count（）
 
如果Like.objects.filter（user = user，content_type = content，object_id = post_id）.exists（）：
＃删除像
 Like.objects.filter（user = user，content_type = content，object_id = post_id）.delete（）
 like_count  -  = 1 
 
 else：
＃添加一个新的
 Like.objects.create（user = user，content_type = content，object_id = post_id）
 lik e_count + = 1 
 
 return HttpResponse（）
 return render（request，'app / blog.html'，{'like_count'：like_count}）
  

模板：

 < div id =like-count> Like {{post.likes.count}}< / div> 
< form method =postaction ={％url'like'％}id =like-form> 
 {％csrf_token％} 
< input type =hiddenid =post_idname =postclass =hidden_​​idvalue ={{post.pk}}/> 
< input type =hiddenid =user_idname =userclass =hidden_​​idvalue ={{user.pk}}/> 
< button class =btn> Like< / button> 
< / form> 
 
< script type =text / javascript> 
 var frm {{post.id}} = $（'＃like-form'）; 
 frm {{like.id}}。submit（function（ev）{
 $ .ajax（{
 type：frm {{post.id}}。attr（'method'） ，
 url：frm {{post.id}}。attr（'action'），
 data：frm {{post.id}}。serialize（），
 success：function数据）{
 document.getElementById（like-count）。innerHTML = {{like_count}}; 
} 
}）; 
 
 ev.preventDefault ）; 
}）; 
< / script> 
  

解决方案

假设Django 1.7 +

  def like（request）：
 if request.is_ajax（）：
 ...确保这是获取的返回值使用
返回JsonResponse（{'like_count'：someVar}）
  

如：

  $ .ajax（{
 ... 
 success：function（response）{
 document.getElementById（'like-count'）。innerHTML = response ['like_count']; 
} 
}）
  

I'm new at Ajax and Django. I have an Ajax like button that adds "likes" to my database. Besides the button, my template also displays the total number of likes. The button works but I can't figure out how to update the "like-count" div because calling {{ post.likes.count }} displays the old result. I'm guessing that's due to caching? To get around this I declared a like_count variable in my view and then add +=1 when liked.

How do I make {{ like_count }} work in my template? Using

return render(request, 'app/blog.html', {'like_count': like_count})

sends me to blank page instead of updating the div.

View:

@login_required
def like(request):
    if request.is_ajax():
        user = request.user
        post_id = request.POST.get('post', None)
        content = ContentType.objects.get_for_model(Post)
        like_count = Like.objects.filter(content_type=content, object_id=post_id).count()

        if Like.objects.filter(user=user, content_type=content, object_id=post_id).exists():
            # remove like
            Like.objects.filter(user=user, content_type=content, object_id=post_id).delete()
            like_count -=1

        else:
            # add a new like
            Like.objects.create(user=user, content_type=content, object_id=post_id)
            like_count +=1

    return HttpResponse()
    return render(request, 'app/blog.html', {'like_count': like_count}) 

Template:

<div id="like-count">Like {{ post.likes.count }}</div>
<form method="post" action="{% url 'like' %}" id="like-form">
         {% csrf_token %}
         <input type="hidden" id="post_id" name="post" class="hidden_id" value="{{ post.pk }}" />
  <input type="hidden" id="user_id" name="user" class="hidden_id" value="{{ user.pk }}" />
  <button class="btn">Like</button>
         </form>

<script type="text/javascript">
    var frm{{ post.id }} = $('#like-form');
    frm{{ like.id }}.submit(function (ev) {
        $.ajax({
            type: frm{{ post.id }}.attr('method'),
            url: frm{{ post.id }}.attr('action'),
            data: frm{{ post.id }}.serialize(),
            success: function (data) {
                document.getElementById("like-count").innerHTML = {{ like_count }};
            }
        });

        ev.preventDefault();
    });
</script>

解决方案

assuming Django 1.7+

def like(request):
    if request.is_ajax():
      ... make sure that this is the return that gets used
    return JsonResponse({'like_count':someVar})

on client.. something like:

  $.ajax({
            ...
            success: function(response) {
                document.getElementById('like-count').innerHTML = response['like_count'];
            }
        })

这篇关于Django + Ajax：发布后更新div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！