[Django学习]Django基础(15)_ajax的评论提交

Posted 2021-02-04 AngryZe

一 功能介绍

　　点击“评论”按钮时，不刷新页面，将评论内容直接插入下方的评论列表中。

　　

二 实现方式

1. 为评论框表单设置id属性

// 为评论框表单设置id属性comment_form
<form id="comment_form" action="{% url \'update_comment\' %}" method="POST" sytle="overflow:hidden">
    {% csrf_token %}
    <label>{{ user.username }}，欢迎评论</label>
    {% for field in comment_form %}
        {{ field }}
    {% endfor %}
    // 添加错误提示框，并设置其id属性comment_error
    <span id="comment_error" class="text-danger pull-left"></span>				
    <input type="submit" value="评论" class="btn btn-primary pull-right">
</form>

2. 在{% url \'update_comment\' %}对应的方法中添加要返回到当前页面的数据

from django.shortcuts import render, redirect
from django.contrib.contenttypes.models import ContentType
from django.urls import reverse
from django.http import JsonResponse
from .models import Comment
from .forms import CommentForm
# Create your views here.

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.comment_text = comment_form.cleaned_data[\'comment_text\']
		comment.content_object = comment_form.cleaned_data[\'content_object\']
		comment.save()

		# 要返回的返回数据
		# status 标记评论是否验证成功
		data[\'status\'] = \'Success\'
                ＃评论列表中的单条评论格式如下：
                ＃angryze (2018-11-27 15:00:37):
                ＃444
                ＃因此返回的数据中需要三个要素：
                ＃username 对应 angryze 
		data[\'username\'] = comment.user.username
                ＃comment_time 对应 (2018-11-27 15:00:37)
		data[\'comment_time\']=comment.comment_time.strftime(\'%Y-%m-%d %H:%M:%S\')
                ＃text 对应 444
		data[\'text\']=comment.comment_text
	else:
		data[\'status\'] = \'Error\'
		data[\'message\'] = list(comment_form.errors.values())[0][0]
        // 以Json格式返回数据
	return JsonResponse(data)            

3. 在模版页面中添加javascript语句

        <script type="text/javascript">
		$("#comment_form").submit(function(){
			//第一步，判断是否为空
			$("#comment_error").text("");
			if(CKEDITOR.instances["id_comment_text"].document.getBody().getText().trim()==\'\'){
				$("#comment_error").text("评论内容不能为空");
				return false;
			}

			// 第二步，更新数据到textarea
			CKEDITOR.instances[\'id_comment_text\'].updateElement();
			// 第三步，设置ajax属性
			$.ajax({
				// 设置提交的url与<form>中的action相同
				url: "{% url \'update_comment\' %}",
				// 设置提交的方法是POST
				type: \'POST\',
				// 序列化表单中的值，其中$(this)表示当前函数的对象，此处代表comment_form表单
				data: $(this).serialize(),
				// 是否运用缓存？
				cache: false,
				// 提交成功，调用方法，返回json数据
				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_comment_text\'].setData(\'\');
					}else{
						// 如果提交提交不成功，在id=comment_error中返回错误信息
						$("#comment_error").text(data[\'message\']);

					}

				},
				// 提交错误，调用方法
				error: function(xhr){
					console.log(xhr);
				}

			});
		});
        </script>

　　

---

  注明：学习资料来自“再敲一行代码的个人空间”以及“杨仕航的博客”