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

Question

我正在创建一个网站，允许用户发表评论和喜欢的帖子。我创建了一个视图功能，允许用户喜欢帖子，但不知道如何实现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
  });
});