如何在JavaScript中动态获取用户ID？

Question

我目前正在从CS50W上使用项目4网络，并且必须实现“关注/取消关注”按钮。我定义了URL，视图中的功能，HTML和JavaScript代码，但是当我单击“关注/untollow”按钮时，我不明白如何在JavaScript中动态获取用户ID。

这是我的代码：

urls.py     path("profile/<int:author_id>/", views.profile, name="profile"),
            path("follow/<int:author_id>/", views.follow, name="follow")

views.py

def follow(request, author_id):
try:
    foo = 'follow'
    logged_user = User.objects.get(id=request.user.id)
    following_user = User.objects.get(id=author_id)
    follower = Follower.objects.get_or_create(follower=logged_user, following=following_user)[1]
    
    a = following_user.id
    if not follower:
        Follower.objects.filter(follower=logged_user, following=following_user).delete()
        foo = 'unfollow'
    all_followers = Follower.objects.filter(following = following_user).count()

except KeyError:
    return HttpResponseBadRequest("Bad request")
return JsonResponse({"foo": foo, "all_followers": all_followers})


profile.html
<center>

<h2>{{ profile_user.username }}</h2>
<h6 class="card-text"><span id="sp_following">{{ following }}</span> Following</h6>
<h6 class="card-text"><span id="sp_followers">{{ followers}}</span> Followers</h6>


<div>
    {% if user.is_authenticated and user.id != profile_user.id %}
    <p class="card-text">
    {% if is_following > 0 %}
        <button id="btnfollow" data-id="{{user_profile.id}}" type="button" class="btn btn-primary">Unfollow</button>
    {% else %}
        <button id="btnfollow" data-id="{{user_profile.id}}" type="button" class="btn btn-outline-primary">Follow</button>
    {%endif%}
    </p>
    {%endif%}
</div>


models.py
class Follower(models.Model):
follower = models.ForeignKey(User, on_delete=models.CASCADE, default=None, related_name="follower_user")
following = models.ForeignKey(User, on_delete=models.CASCADE, default=None, related_name="following_user")


index.js
document.addEventListener('DOMContentLoaded', function () {

if (document.getElementById('btnfollow')) {
    document.querySelector('#btnfollow').addEventListener('click', function (event) {
        fetch(`/follow/${WHAT NEEDS TO BE ADDED HERE?}/`)
        .then(response => response.json())
        .then(data => {
            document.querySelector('#sp_followers').innerHTML = data.all_followers;
            if (data.foo == 'follow') {
                this.innerHTML = 'Unfollow';
                this.className = 'btn btn-primary';
            } else {
                this.innerHTML = 'Follow';
                this.className = 'btn btn-outline-primary';
            }
        })
    })

}

}）

在代码 fetth（`/clost/$ {????}/`）我尝试了一堆事情（ex：ex：this.dataset.id，id，id） ，furety_id等），但无效。另外，如果我在URL中手动插入现有的（在db中）ID，例如 fetch（`/laster/2/`）我点击的特定用户。

Answer 1

您可以在情况下以两种不同的方式获取用户ID：

• 在单击事件时，通过通过 {{user_profile.id}} onclick 处理程序中。 >
• 代码 标记名称关键字，然后访问 data-id 属性IE this.dataset.id 参考

提示：您需要用类名称替换按钮ID，导致 id id id < /代码>在DOM级别上应是唯一的。