Javascript 使用Ajax的Like按钮在Django项目中不起作用
我遇到了一个问题,我正试图在django应用程序中实现一个“Like”按钮 我有用于模型的功能,即使在html模板中,如果我从用户手动添加一个like,代码也可以工作 看起来我的Ajax可能是个问题,但我似乎不知道为什么 这是我的models.py:Javascript 使用Ajax的Like按钮在Django项目中不起作用,javascript,django,ajax,django-templates,Javascript,Django,Ajax,Django Templates,我遇到了一个问题,我正试图在django应用程序中实现一个“Like”按钮 我有用于模型的功能,即使在html模板中,如果我从用户手动添加一个like,代码也可以工作 看起来我的Ajax可能是个问题,但我似乎不知道为什么 这是我的models.py: class Post(models.Model): direct_url = models.URLField(unique=True) post_url = models.URLField() post_title = mo
class Post(models.Model):
direct_url = models.URLField(unique=True)
post_url = models.URLField()
post_title = models.CharField(max_length=300)
time_posted = models.DateTimeField(default=timezone.now)
user = models.ForeignKey(User, on_delete=models.CASCADE)
class Like(models.Model):
liker = models.ForeignKey(User, on_delete=models.CASCADE)
post = models.ForeignKey(Post, on_delete=models.CASCADE, related_name='likes')
date_created = models.DateTimeField(default=timezone.now)
def save(self, *args, **kwargs):
super(Like, self).save(*args, **kwargs)
这是我的观点
class PostListView(LoginRequiredMixin, generic.ListView):
model = Post
template_name = 'homepage/home.html'
ordering = ['-time_posted']
context_object_name = 'posts'
paginate_by = 6
def get_context_data(self, **kwargs):
context = super().get_context_data(**kwargs)
context['now'] = datetime.now()
context['likesbyuser'] = Like.objects.filter(liker=self.request.user)
return context
def likePost(request):
if request.method == 'GET':
post_id = request.GET['post_id']
likedpost = Post.objects.get(pk=post_id) # getting the liked post
if Like.objects.filter(post=likedpost, liker=request.user).exists():
Like.objects.filter(post=likedpost, liker=request.user).delete()
else:
m = Like(post=likedpost, liker=request.user) # creating like object
m.save() # saves into database
return HttpResponse(likedpost.likes.count())
else:
return HttpResponse("Request method is not a GET")
这是模板的一部分,我在其中放置了使用Ajax的按钮,Ajax应该调用类似的函数:
{% for i in post.likes.all %}
{% if user == i.liker %}
<a class='likebutton' data-catid="{{ post.id }}"><i id='like{{ post.id }}' class="btn fas fa-heart fa-lg post-buttons "></i></a>
{% elif forloop.last %}
<a class='likebutton' data-catid="{{ post.id }}"><i id='like{{ post.id }}' class="btn far fa-heart fa-lg post-buttons "></i></a>
{% endif %}
{% empty %}
<a class='likebutton' data-catid="{{ post.id }}"><i id='like{{ post.id }}' class="btn far fa-heart fa-lg post-buttons "></i></a>
{% endfor %}
{% endfor %}
{post.likes.all%中的i的%
{%if user==i.liker%}
{%elif forloop.last%}
{%endif%}
{%empty%}
{%endfor%}
{%endfor%}
下面是我在脚本标记中添加到base.html的Ajax代码
<script type="text/javascript">
$('main').on('click', '.likebutton', function(){
var catid;
catid = $(this).attr("data-catid");
$.ajax(
{
type:"GET",
url: "/likepost/",
data:{
post_id: catid
},
success: function(data){
if(data==0){
$('.like' + catid).toggle();
$('#like' + catid).toggleClass("far fas");
$('#likecount' + catid).html('');
console.log(data+'if');
}
else if(data==1){
if($('.like' + catid).is(":hidden"))
{
$('.like' + catid).toggle();
}
$('#like' + catid).toggleClass("far fas");
$('#likecount' + catid).html(data + ' like');
console.log(data+'elseif');
}
else{
$('#like' + catid).toggleClass("far fas");
$('#likecount' + catid).html(data + ' likes');
console.log(data+'else');
}
}
})
});
</script>
$('main')。在('click','likebutton',函数()上{
卡提德变种;
catid=$(this.attr(“数据catid”);
$.ajax(
{
键入:“获取”,
url:“/likepost/”,
数据:{
邮政编码:catid
},
成功:功能(数据){
如果(数据==0){
$('.like'+catid).toggle();
$('#like'+catid).toggleClass(“far-fas”);
$('#likecount'+catid).html('');
日志(数据+if');
}
else if(数据==1){
if($('.like'+catid).is(“:hidden”))
{
$('.like'+catid).toggle();
}
$('#like'+catid).toggleClass(“far-fas”);
$('#likecount'+catid).html(数据+'like');
log(数据+'elseif');
}
否则{
$('#like'+catid).toggleClass(“far-fas”);
$('likecount'+catid).html(数据+'likes');
log(数据+'else');
}
}
})
});
我已尝试添加event.preventDefault();到ajax调用,但这并没有解决我的问题。我发现了问题
我将Ajax代码指向“main”,如以下代码片段所示:
...
<script type="text/javascript">
$('main').on('click', '.likebutton', function(){
...
。。。
$('main')。在('click','likebutton',函数()上{
...
我的问题是,当我把这个项目移植过来时,我忘了用主标记来包围这个块
在my base.html中,我添加了以下代码:
<main role="main" class="container h-100">
{% block content %}
{% endblock content %}
</main>
{%block content%}
{%endblock内容%}
这解决了问题