Django Ajax Likes 工作不正确：jQuery 的问题

Question

我有一个点赞功能，它适用于“详细产品”。但是，我想在显示多个产品的主页上添加此功能。不确定，如何正确地做到这一点。

urls.py：

url(r'^like$', views.like_product, name='like_product')

base.html中的脚本：

<script type="text/javascript">
    $(document).ready(function(event){
        $(document).on('click', '#like', function(event){
            event.preventDefault();
            var pk = $(this).attr('value');
            $.ajax({
                type: 'POST',
                url: '{% url 'like_product' %}',
                data: {'id': pk, 'csrfmiddlewaretoken': '{{ csrf_token }}'},
                dataType: 'json',
                success: function(response){
                    $('#like-section').html(response['form'])
                    console.log($('#like-section').html(response['form']));
                },
                error: function(rs, e){
                    console.log(rs.responseText);
                },
            });
        });
    });
</script>

likes.html：

<form action="{% url 'like_product' %}" method="post">
    {% csrf_token %}
    {% if is_liked %}
        <button type="submit" id="like" name="product_id" value="{{ product.id }}" class="btn btn-danger">Dislike</button>
    {% else %}
        <button type="submit" id="like" name="product_id" value="{{ product.id }}" class="btn btn-primary">Like</button>
    {% endif %}
</form>

views.py：

def home(request):
    products = Product.objects.all().order_by('-pub_date')
    f = ProductFilter(request.GET, queryset=products)
    context = {
        'filter': f,
    }
    return render(request, 'product/home.html', context).


def detail(request, product_id):
    product = get_object_or_404(Product, product_id=product_id)
    is_liked = False
    if product.likes.filter(id=request.user.id).exists():
        is_liked = True
    context = {
        'product': product,
        'is_liked': is_liked,
        'total_likes': product.total_likes()
    }
    return render(request, 'product/detail.html', context)


def like_product(request):
    product = get_object_or_404(Product, id=request.POST.get('id'))
    is_liked = False
    if product.likes.filter(id=request.user.id).exists():
        product.likes.remove(request.user)
        is_liked = False
    else:
        product.likes.add(request.user)
        is_liked = True
    context = {
        'product': product,
        'is_liked': is_liked,
        'total_likes': product.total_likes()
    }
    if request.is_ajax():
        html = render_to_string('product/likes.html', context, request=request)
        return JsonResponse({'form': html})

如果从主页点击，喜欢/不喜欢会被正确记录，但是它们没有正确显示（喜欢和不喜欢按钮的实际数量只能在“详细产品”页面上看到）。我怀疑这是因为我在两个按钮的 likes.html 中都有id="like"。我怀疑jQuery 脚本也需要更改。不知道该怎么做。提前感谢您的帮助。

Answer 1

我假设您正在从 URL 获取 ID 到详细信息页面。这实际上取决于您如何在页面上生成产品列表，但如果您在模板中使用循环，那么只需在每个产品下添加like按钮，然后使用它的 id 来设置 like 表单。