在Django项目中实现Ajax无法正常工作

Question

我正试图使用Ajax在我的博客文章中实现一个类似按钮，我遇到了一个无法修复的错误，所以我不止一次从零开始，采取了以下步骤：

1. 创建Post模型和Like模型
2. 添加了当前运行良好的视图，当我单击"喜欢"one_answers"不喜欢"时
3. 我从post_detail.html中提取了类似的部分，并将其添加到一个单独的htmllike_section.html中
4. 添加了具有正确值的ajax

现在我的问题是，当我按下类似按钮时，会打开一个带有ajax输出的新页面

{"form": "....(html and ajax codes repeated)......"}

我的问题是如何修复此错误，以便在不刷新页面的情况下提交点赞

以下是Posts.py的模型

class Post(models.Model):
---------other attributed like: title, content, author, date_posted, slug-----
likes = models.IntegerField(default=0)
class Like(models.Model):
user = models.ForeignKey(User, on_delete=models.CASCADE)
post = models.ForeignKey(Post, on_delete=models.CASCADE)

以下是视图：

def like_post(request):
user = request.user
if request.method == 'POST':
post = request.POST.get('post_id')
post_obj = Post.objects.get(id=post)
current_likes = post_obj.likes
if user in post_obj.liked.all():
post_obj.liked.remove(user)
current_likes = current_likes - 1
else:
post_obj.liked.add(user)
current_likes = current_likes + 1
post_obj.likes=current_likes
post_obj.save()
like, created = Like.objects.get_or_create(user=user, post_id=post)
if not created:
if like.value == 'Like':
like.value = 'Unlike'
else:
like.value = 'Like'
like.save()
context = {
'post': post,
}
if request.is_ajax:
html = render_to_string('blog/like_section.html',context, request=request)
return JsonResponse({'form': html})

这是文章的详细信息。html

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

这是类似的部分.html

<form action="{% url 'blog:like-post' %}" method="POST" class="like-form" id="{{post.id}}">
{% csrf_token %}
<input type="hidden" name="post_id" value='{{post.id}}'>
{% if user not in post.liked.all %}
<button id="like" value='{{post.id}}' class="bwhite sm-button" style="color: grey; background-color: Transparent; background-repeat:no-repeat; border: none; cursor:pointer; overflow: hidden; outline:none;">
<i class="far fa-thumbs-up" type="submit"></i>
</button>
{% else %}
<button id="like" value='{{post.id}}' class="bwhite sm-button" >
<i class="far fa-thumbs-up" type="submit"></i>
</button>
{% endif %}
<div class="like-count{{post.id}}">{{ post.num_likes }} Likes</div>
</form>

这是ajax：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript"></script>
<script>
$(document).ready(function(event){
$(document).on('click', '#like', function(event){
event.preventDefault();
var pk = $(this).attr('value');
$.ajax({
type: 'POST',
url: '{% url "blog:like-post" %}',
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);
},
});
});
</script>

这是urls.py

path('blogs/like', like_post, name='like-post'),

Answer 1

您正在从视图中返回一个HTML页面作为响应，我认为这可能是导致它的原因。首先，只需尝试返回类似{quot；msg"，"worked"}的内容，看看它是否在中工作