基于Django框架利用Ajax实现点赞功能实例代码

2018-09-26 20:04

阅读：528

　　概要：

　　要实现点赞功能，需要实现的有：谁进行的点赞、什么时候进行点赞、点赞的对象是谁、每一个对象的点赞数量是多少、点赞过后还需要能够取消点赞，为了是点赞后的信息能够及时的显示在前端页面，就需要使用Ajax来异步请求数据，实现实时显示。

　　下面话不多说了，来随着小编一起看看详细的介绍吧

　　模型分析：

　　创建的模型需要记录的数据有：点赞者、点赞对象、点赞时间、点赞的数量，由于前面三个属性主要用于记录点赞的状态，而点赞数量主要用于记录某篇文章的点赞数量，所以这里最好把点赞数量单独放在一个模型中。这里就创建了两个模型，LikeRecord和LIkeCount，LikeRecord用于记录点赞状态，LIkeCount用于记录点赞的数量。大致的思路图：

　　代码：

　　视图函数：

　　视图函数主要的作用就是接受前端通过Ajax发送回来的数据，并且对数据进行判断处理，然后对前面的两个模型进行实例化操作已经数据变更操作，当数据成功过后返回处理后的结果，当数据存在错误时，返回相应的提示信息。

　　代码：

　　 from django.shortcuts import render, HttpResponseRedirect from django.contrib.contenttypes.models import ContentType from django.http import JsonResponse from .models import LikeCount, LikeRecord # Create your views here. # 数据操作成功返回数据方法 def success_response(like_num): data = {} data[status] = SUCCESS data[like_num] = like_num return JsonResponse(data) # 数据操作失败返回信息的方法 def error_response(message): data = {} data[status] = ERROR data[message] = message return JsonResponse(data) def like_up(request): # 得到GET中的数据以及当前用户r # 判断用户是否登录 if not user.is_authenticated: return error_response(未登录，不能进行点赞操作) content_type = request.GET.get(content_type) content_type = ContentType.objects.get(model=content_type) object_id = request.GET.get(object_id) is_like = request.GET.get(is_like) # 创建一个点赞记录 if is_like == true: # 进行点赞，即实例化一个点赞记录 like_record, created = LikeRecord.objects.get_or_create(content_type=content_type, object_id=object_id, like_user=user) # 通过created来判断点赞记录是否存在，如果存在则不进行点赞，如果不存在则进行点赞数量加一 if created: # 不存在点赞记录并且已经创建点赞记录，需要将点赞数量加一 like_count, created = LikeCount.objects.get_or_create(content_type=content_type, object_id=object_id) like_count.like_num += 1 like_count.save() return success_response(like_count.like_num) else: # 已经进行过点赞 return error_response(已经点赞过) else: # 取消点赞 # 先查询数据是否存在，存在则进行取消点赞 if LikeRecord.objects.filter(content_type=content_type, object_id=object_id, like_user=user).exists(): # 数据存在，取消点赞 # 删除点赞记录 LikeRecord.objects.get(content_type=content_type, object_id=object_id, like_user=user).delete() # 判断对应的点赞数量数据是否存在，如果存在则对点赞数量进行减一 like_count, create = LikeCount.objects.get_or_create(content_type=content_type, object_id=object_id) if create: # 数据不存在，返回错误信息 return error_response(数据不存在，不能取消点赞) else: # 数据存在，对数量进行减一 like_count.like_num -= 1 like_count.save() return success_response(like_count.like_num) else: # 数据不存在，不能取消点赞 return error_response(数据不存在，不能取消点赞)

　　Ajax代码：

　　该段代码的主要作用：通过前端按钮触动相应的处理函数，将当前的数据传递给后端，后端接受数据后进行处理，处理完后的数据再返回给前端，通过Ajax实时显示到前端。

　　代码：

　　 <script type=text/javascript> function change_like(obj, content_type, object_id) { // 判断obj中是否包含active的元素，用于判断当前状态是否为激活状态 var is_like = obj.getElementsByClassName(active).length == 0 $.ajax({ url: /like_up/, // 为了避免加入csrf_token令牌，所以使用GET请求 type: GET, // 返回的数据用于创建一个点赞记录 data: { content_type: content_type, object_id: object_id, is_like: is_like, }, cache: false, success: function (data) { console.log(data); if (data[status] == SUCCESS){ // 更新点赞状态 // 通过class找到对应的标签 var record = $(obj.getElementsByClassName(glyphicon)) if (is_like){ record.addClass(active) } else { record.removeClass(active) } // 更新点赞数量 var like_num = $(obj.getElementsByClassName(like_num)) like_num.text(（ + data[like_num] + ）) } else { // 以弹窗的形式显示错误信息 alert(data[message]) } }, error: function (xhr) { console.log(xhr) } }); return false; }; </script>

　　最终效果图：