通过对 JQuery框架下的ajax基础功能的梳理，现在要正式开始做点赞功能了。
前置文章为：https://www.jianshu.com/p/dc6bdecc772d
1：选择 .ajax 来进行交互
前面说过了load，get，post等方法，而在做点赞功能的里面，我们会用到 .ajax来前后交互
首先 看下后端views视图函数写法
第一个是本身的页面：
def test_page(request):
return render(request,'test_page.html')
第二个是需要用于局部刷新用的视图函数
def test_ajax(request):
name_dict = {'News': 'Learning Ajax'}
return JsonResponse(name_dict)
其次还是在一个页面上做一个按钮，用于点赞
<body>
{% csrf_token %}
<input id="test" type="submit" value="点赞">
<p id="test1">这里的信息会变化</p>
<script>
$(document).ready(function(){
$('#test').click(function(){
$.ajax({
url:"/test_ajax",
type:"post",
dataType:"json",
data:{
user:123,
csrfmiddlewaretoken:'{{ csrf_token }}',
},
success:function(result){
$('#test1').html(result.News)
}
})
})
})
</script>
</body>
上面的代码，作用是点赞的按钮的功能，提交到的test_ajax，并根据上面的那个视图函数，返回json对象 {'News': 'Learning Ajax'}，之后把id为test1的区域内容改成json的内容。
来看下效果图
id为test1的内容已经被修改成json对象的内容了
2: 测试代码编写
我们在上面的代码基础上，先进行初步修改，做到点击以后，可以增加点赞数并显示总数。
def test_ajax(request):
testmodel = TestModel.objects.get(id=2) #以id为2的测试模型为例
like = Likes(content_object=testmodel,like_by=request.user)
like.save()
total_like_query = len(testmodel.like_info.all()) #获取赞的总数
return JsonResponse({'total_like_query':total_like_query})
接着修改前端代码，让id为test1的区域，在被点赞后显示最新的点赞总数。
<body>
{% csrf_token %}
<input id="test" type="submit" value="点赞">
<p id="test1">{{total_like_query}}</p>
<script>
$(document).ready(function(){
$('#test').click(function(){
$.ajax({
url:"/test_ajax",
type:"post",
dataType:"json",
data:{
csrfmiddlewaretoken:'{{ csrf_token }}',
},
success:function(result){
$('#test1').html(result.total_like_query)
}
})
})
})
</script>
</body>
除了在点赞后立刻更新点赞总数之外，我们还需要让页面在正常访问的时候可以显示点赞总数，所以页面本身也需要修改。
def test_page(request):
testmodel = TestModel.objects.get(id=2)
total_like_query = len(testmodel.like_info.all())
return render(request,'test_page.html',{'total_like_query':total_like_query})
这样，无论你是访问页面，还是按下点赞按钮，页面始终可以显示点赞总数。
效果图
2：优化代码
接着进行代码优化，用到了ContentType里的related_query_name
用法可以参考另外一篇文章最后一部分
https://www.jianshu.com/p/7a0ddbb02ae3
优化后代码如下
class TestModel(models.Model):
title = models.CharField('测试模型',max_length=30)
like_info = GenericRelation(Likes,related_query_name='testmodels')
def test_ajax(request):
testmodel = TestModel.objects.filter(id=3).first()
like_query = Likes.objects.filter(testmodels__id=3,like_by=request.user.id).first()
if like_query is None:
like = Likes(content_object=testmodel,like_by=request.user)
like.save()
total_like_query = len(testmodel.like_info.all())
return JsonResponse({'notice':'Thanks for your vote','total_like_query':total_like_query})
else:
return JsonResponse({'notice':'You cant vote twice '})
这样，当按了点赞按钮以后，首先进行这个赞的查询like_query，如果不存在的话，则说明当前用户没有给这个对象点过赞，生成新的like实例，并提示谢谢你的投票。
反之如果已经存在了，跳出警告框告知你不能投2次票。
这样，简单的点赞功能和逻辑判断就完成了。
网友评论