如何在不重新加载页面的情况下运行包含操作参数的视图函数

Question

我正在创建一个允许用户发布 cmets 和点赞帖子的网站。我创建了一个视图函数，它允许用户喜欢帖子，但不确定如何实现 ajax 或类似技术来执行请求而无需重新加载页面。这样用户就不会丢失他们在页面上的位置，并且在喜欢帖子后必须向下滚动才能找到它。

在我的views.py：

#this is the function i wish to run without reloading
def like(request, operation, id):
    like = Post.objects.get(id=id)
    if operation == 'add':
        Like.make_like(request.user, like)
    elif operation == 'remove':
        Like.lose_like(request.user, like)
    return HttpResponseRedirect('/Feed/')

#this is the view in which it is called
class FeedView(TemplateView):
    template_name = 'feed.html'


    def get(self, request):
        form = HomeForm()
        posts = Post.objects.all().order_by('-created')
        users = User.objects.exclude(id=request.user.id)
        try:
            like = Like.objects.get(user=request.user)
            likes = like.posts.all()
        except Like.DoesNotExist:
            like = None
            likes = None
        args = {
            'form': form, 'posts': posts, 'users': users, 'likes': likes
        }
        return render(request, self.template_name, args)

    def post(self, request):
        form = HomeForm(request.POST)
        if form.is_valid():
            post = form.save(commit=False)
            post.user = request.user
            post.save()

            text = form.cleaned_data['post']
            form = HomeForm()
            return HttpResponseRedirect('/Feed/')

        args = {'form': form, 'text': text}
        return render(request, self.template_name, args)

feed.html:

    {% for post in posts %}
        <p class="name">{{ post.user.username }}</p>
        <h3>{{ post.post }}</h3>
              {% if not post in likes %}
                <li-r><a class="like" href="{% url 'like' operation='add' id=post.id %}"> {{ post.total_likes }}  </a></li-r>
              {% endif %}
              {% if post in likes %}
                <li-r><a class="unlike" href="{% url 'like' operation='remove' id=post.id %}"> {{ post.total_likes }} </a></li-r>
              {% endif %}
        <p class="date">{{ post.created }}</p>
    {% endfor %}

urls.py:

    urlpatterns = [
    url(r'^Feed/$', FeedView.as_view(), name='feed'),
    url(r'^like/(?P<operation>.+)/(?P<id>\d+)/$', views.like, name='like')
    ]

我尝试将函数放在 Feed 类中，但我不知道如何编写 url 以包含该类以及 "(?P<operation>.+)/(?P<id>\d+)" 部分，或者即使这样可以解决我的问题。但我认为我可以使用 ajax，虽然我不知道如何使用。

Answer 1

您需要在这里使用 Ajax。在锚标签上使用onclick 事件侦听器来表示喜欢/不喜欢，改为进行ajax 调用并根据响应更新计数。

$('.like, .unlike').click(function(e){
  e.preventDefault();
  var url = $(this).attr('href'));
  // make a get call on this url, and update the total_likes based on response
  $.get(url, function( data ) {
    $(this).text(data.total_likes);  //something like that
  });
});