Django富文本编辑和ajax提交评论

Posted 2021-04-15 滑稽研究所

哈喽，大家好呀，我是滑稽君。记得之前我们为博客编辑增加的富文本编辑器吗？这次我们为评论功能也加上去。我们还需要用到Ajax使我们的评论变成异步提交。

Ajax 即“Asynchronous javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。

通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

视频讲解：

Play

异步处理：我们通过事件触发到 ajax，请求服务器，在这个期间无论服务器有没有响应，客户端的其他代码一样可以运行。

同步处理：我们通过实践触发 ajax，请求服务器，在这个期间等待服务器处理请求， 在这个期间客户端不能做任何处理。当 ajax 执行完毕才会继续执行其他代码。

简单来说，同步就是你叫我去吃饭，我听到了就和你去吃饭；如果没有听到，你就不停的叫，直到我告诉你听到了，才一起去吃饭。 异步就是你叫我，然后自己去吃饭，我得到消息后可能立即走，也可能等到忙完才去吃饭。

效果：

可以看到，我们现在也可以使用富文本来编辑我们的评论。但是我们去掉了上传图片的功能，这是为了防止有人上传大量的图片，占用我们的服务器资源。这需要我们在setting里面进行定制。

setting.py

CKEDITOR_CONFIGS = { 'default':{}, 'comment_ckeditor': { 'toolbar': 'custom', 'toolbar_custom': [ ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript'], ["TextColor", "BGColor", 'RemoveFormat'], ['NumberedList', 'BulletedList'], ['Link', 'Unlink'], ["Smiley", "SpecialChar", 'Blockquote'], ], 'width': 'auto', 'height': '180', 'tabSpaces': 4, 'removePlugins': 'elementspath', 'resize_enabled': False, }}

第二行的默认的控制字典很重要，缺少的话会报错。

views.py

def update_comment(request): referer = request.META.get('HTTP_REFERER', reverse('home')) comment_form = CommentForm(request.POST, user=request.user) data = {}
 if comment_form.is_valid(): # 检查通过，保存数据 comment = Comment() comment.user = comment_form.cleaned_data['user'] comment.text = comment_form.cleaned_data['text'] comment.content_object = comment_form.cleaned_data['content_object'] comment.save()
 # 返回数据 data['status'] = 'SUCCESS' data['username'] = comment.user.username data['comment_time'] = comment.comment_time.strftime('%Y-%m-%d %H:%M:%S') data['text'] = comment.text else: #return render(request, 'error.html', {'message': comment_form.errors, 'redirect_to': referer}) data['status'] = 'ERROR' data['message'] = list(comment_form.errors.values())[0][0] return JsonResponse(data)

这是处理评论的函数。可以看到，与第一张图片控制台里的状态、用户名、时间、内容一一对应，这是我们检查通过后返回我们的数据，之后我们还需要在前端页面返回它。

blog_detail.py

{% block script_extends %} <script type="text/javascript"> $("#comment_form").submit(function(){ // 判断是否为空 $("#comment_error").text(''); if(CKEDITOR.instances["id_text"].document.getBody().getText().trim()==''){ $("#comment_error").text('评论内容不能为空'); return false; }
 // 更新数据到textarea CKEDITOR.instances['id_text'].updateElement();
 // 异步提交 $.ajax({ url: "{% url 'update_comment' %}", type: 'POST', data: $(this).serialize(), cache: false, success: function(data){ console.log(data); if(data['status']=="SUCCESS"){ // 插入数据 var comment_html = '<div>' + data['username'] + ' (' + data['comment_time'] + ')：' + data['text'] + '</div>'; $("#comment_list").prepend(comment_html); // 清空编辑框的内容 CKEDITOR.instances['id_text'].setData(''); }else{ // 显示错误信息 $("#comment_error").text(data['message']); } }, error: function(xhr){ console.log(xhr); } }); return false; });</script>{% endblock %}

异步提交部分，我们在这里完成对评论的一些设置，包括提交之后清空本文区，插入数据，显示错误信息。获取数据、审查数据、提交到前端页面，这就是我们提交的评论所需要经历的流程。

仅展示部分源码，更细节的内容我们放在视频中为大家演示，全部源码放百度云啦~

https://pan.baidu.com/s/1tUJ3x9l_Dq1EvmTtMT4GOQ公众号内发送django获取提取码。学习素材来自：https://space.bilibili.com/252028233

❂ 滑稽研究所

有什么疑问看视频呦。