html+jquery ajax 点赞功能,Django Ajax 点赞功能

通过对 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)

其次还是在一个页面上做一个按钮，用于点赞

{% csrf_token %}

这里的信息会变化

$(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)

}

})

})

})

上面的代码，作用是点赞的按钮的功能，提交到的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的区域，在被点赞后显示最新的点赞总数。

{% csrf_token %}

{{total_like_query}}

$(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)

}

})

})

})

除了在点赞后立刻更新点赞总数之外，我们还需要让页面在正常访问的时候可以显示点赞总数，所以页面本身也需要修改。

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次票。

这样，简单的点赞功能和逻辑判断就完成了。