Как передать локальную переменную функции в представлениях Django в javascript fetch API?
Я совсем новичок в javascript. Я делаю кнопку like, которая будет увеличивать количество лайков поста асинхронно без перезагрузки всей страницы. Ниже приведена моя функция Django views.
views.py
@login_required
def likepost(request,id):
post = NewPost.objects.get(id = id)
is_like = False
for like in post.likepost.all():
if like == request.user and request.method == "POST":
is_like = True
break
if not is_like:
post.likepost.add(request.user)
else:
post.likepost.remove(request.user)
return JsonResponse({
"id" : id,
"is_like" : is_like,
"num_like" : post.likepost.count()
})
Здесь id
- первичный ключ модели NewPost. Мой javascript будет получать API, используя эту переменную id
. Вот моя js-функция.
document.addEventListener("DOMContentLoaded",function(){
document.querySelector('#like').addEventListener('click', ()=> like_function());
})
function like_function(){
fetch(`index/${id}/like`)
.then(response => response.json())
.then(result => {
if(result.is_like){
document.querySelector('#like').innerHTML = "Like";
}
else{
document.querySelector('#like').innerHTML = "Unlike";
}
})
}
<button onclick="like_function()" id = "like" class="btn btn-link"><i class="fa fa-heart"></i> </button>
<small id="num_of_likes">{{ posts.likepost.all.count }}</small>
{% block script %}
<script src="{% static 'network/controller.js' %}"></script>
{% endblock %}
<button class="btn btn-link" style="text-decoration: none;">Comment</button>
<a href="{% url 'postpage' id=posts.id %}" class="btn btn-link" style="text-decoration: none;">View Post</a>
Здесь я поделился своей функцией javascript, а также HTML-шаблоном.
Если я нажимаю кнопку "Мне нравится", появляется следующее сообщение.
Что мне теперь делать?
Вам необходимо добавить первичный ключ элемента в вызове like_function
:
<button onclick="like_function({{ posts.pk }})" id = "like" class="btn btn-link"><i class="fa fa-heart"></i> </button>
тогда вы определяете like_function
как:
function like_function(id) {
fetch(`index/${id}/like`)
.then(response => response.json())
.then(result => {
if(result.is_like){
document.querySelector('#like').innerHTML = "Like";
}
else{
document.querySelector('#like').innerHTML = "Unlike";
}
})
}