如何在 HTML/AJAX/DJANGO 中处理具有相同 ID 的多个元素?

Question

我已经创建了喜欢/不喜欢博客帖子的功能，但目前用户只能在post_detail页面上点赞。现在我想改进我的页面，这样用户就不必打开post_detail视图，而是可以喜欢主提要上的帖子。

使用我当前的代码，我面临着多个html元素共享同一ID的问题。我知道 ID 是唯一的，所以我需要以某种方式创建唯一的 ID，但我不知道如何做到这一点。

在post_detail页面中，我有一个div来包含我的 html 模板以供喜欢：

<div id="like-section">
{% include 'feed/like_section.html' %}
</div>

在like_section文件中，我有两个用于喜欢/不喜欢帖子的按钮：

<form action="{% url 'post-likes' %}" method="POST">
{% csrf_token %}
{% if is_liked %}
<button type="submit" id="like" name="post_id" value="{{ post.id }}" class="btn btn-secondary btn-danger">Unlike</button>
{% else %}
<button type="submit" id="like" name="post_id" value="{{ post.id }}" class="btn btn-secondary">Like</button>
{% endif %}
</form>
<p class="">{{ post.likes.count }} people liked this post</p>

如果提交此表单，以下 jQuery 代码将调用我的 django 视图：

$(document).on('click', '#like', function(event){
event.preventDefault();
// Primary Key from form is the value of the button!
var pk = $(this).attr('value');
$.ajax({
type: 'POST',
url: '{% url 'post-likes' %}',
data: {'post_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);
},
});
});

最后是将用户添加到喜欢列表的 django 视图：

def post_like(request):
post = get_object_or_404(Post, pk=request.POST.get('post_id'))
if post.likes.filter(id=request.user.id).exists():
post.likes.remove(request.user)
is_liked = False
else:
post.likes.add(request.user)
is_liked = True
context =  {
'post': post,
'is_liked': is_liked,
}
if request.is_ajax():
html = render_to_string('feed/like_section.html', context, request=request)
return JsonResponse({'form': html})

为了保持按钮状态的持久性，我传递了上下文变量is_liked这是一个布尔值，用于确定请求用户是否喜欢帖子。

如果我每页只有一个帖子，但我希望每页有多个帖子来有一个用户仍然能够喜欢帖子的提要，这很好用。

Answer 1

关于你所描述的(我不知道你是如何加载你的帖子的(，以下是我是如何做到的：

views(where you are loading your posts)
def forms(request):
posts = Post.objects.all()
return render(request, 'posts.html', {'posts': posts})

posts.html
{% for post in posts %}
<div post-id="{{ post.pk }}">
// load other parts
</div> 
{% endfor %}

jquery part
$(".your-selector").click(function () {
var post = $(this).attr('post-id');
$.ajax({
url: '/your-url/',
data: {
'post': post,
....
},
type: 'post',
cache: false,
success: function (data) {
// do stuff on success
},
});
});

现在您正在加载帖子，每个div都有自己的 ID，现在您可以在一个页面中完成。我认为这可以解决问题，请记住，您需要更改js才能获得post-id。