Question

我目前正在尝试为uni项目开发一个facebook克隆。我要创建一个“喜欢”按钮（在这里称为“ Give lasanha”），并使其更新而不刷新页面。到目前为止，我已经成功完成了此操作，但是它只会更新我的第一篇文章，而对其他任何文章均无效。

[外观图片：https://i.gyazo.com/0e239fc05b401e5d1d96b6a1e08063e1.png]

我已经尝试了很多东西，但是没有什么使我有一个解决方案，所以这就是我在这里写的原因。

这是我的模板： home.html（我们称为ajax脚本）

     {% for post in posts %}
        {% if post.content is None %}
            <script>
                var x = '{{ post.id }}';
                $(document).ready(function (event) {
                    var x = '#lasanha'+'{{ post.id }}'
                    $(document).on('click', '#lasanha'+'{{ post.id }}', function (event) {
                        console.log( "e."+x);
                        event.preventDefault();
                        var pk = $(this).attr('value');
                        $.ajax({
                            type: 'POST',
                            url: '{% url "give_lasanha" %}',
                            data: {'id':pk, 'csrfmiddlewaretoken': '{{ csrf_token }}' },
                            dataType: 'json',
                            success: function(response){
                                $('#lasanha_section').html(response['form'])
                            },
                        })
                    })
                })
            </script>
        {% endif %}
    {% endfor %}

<div id="lasanha_section" class="form-group">
                      {% include 'space/lasanha_section.html' %}
                </div>

lasanha_section.html

{{post.lasanhas.count}} Lasanha{{post.lasanhas.count|pluralize}}
<form action="{% url 'give_lasanha' %}" method="submit">
    <p id="er" value="{{post.id}}"></p>
    {% csrf_token %}
    {% if is_liked %}
        <button type="submit" id="lasanha{{post.id}}" name="post_id" value="{{ post.id }}" class="btn btn-outline-info">Steal lasanha</button>
    {% else %}
        <button type="submit" id="lasanha{{post.id}}" name="post_id" value="{{ post.id }}" class="btn btn-outline-info">Give lasanha</button>
    {% endif %}
</form>

我的views.py：

@login_required
def give_lasanha(request):
    post = get_object_or_404(Post, id=request.POST.get('id'))
    is_liked = False
    if post.lasanhas.filter(user=request.user).exists():
        post.lasanhas.remove(request.user.galaxy)
        is_liked = False
    else:
        post.lasanhas.add(request.user.galaxy)
        is_liked = True

    context = {
        'post': post,
        'is_liked': is_liked,
        'total_liked': post.lasanhas.count(),
    }

    if request.is_ajax():
        html = render_to_string('space/lasanha_section.html', context, request=request)
        return JsonResponse({'form': html})

由于它也可能很重要... 我的帖子模型：

class Post(models.Model):
    author = models.ForeignKey(settings.AUTH_USER_MODEL, on_delete=models.CASCADE)
    stars = models.ManyToManyField(Star)
    title = models.CharField(max_length=50)
    image = models.ImageField(upload_to='Galaxy_pics')
    lasanhas = models.ManyToManyField(Galaxy)
    content = models.TextField(null=True) #
    date_posted = models.DateTimeField(default=timezone.now)

我相信这是我必须分享的所有代码！我希望这适用于每个帖子（如上图所示），但仅适用于页面外的第一篇帖子，不适用于其他帖子。

当我在第一篇文章中单击“ Give lasanha”时，按钮将变为“ Steal lasanha”，并且计数器将更新为1个Lasanhas。

当我单击另一个时，什么也没发生。

提前感谢您抽出宝贵时间来提供帮助。

Django + Ajax：更新内容而无需刷新

0 个答案: