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


    一 功能介绍

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

      

    二 实现方式

    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>
    

      


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

     

  • 相关阅读:
    java.lang.OutOfMemoryError: Java heap space解决方法
    深入理解SQL的四种连接-左外连接、右外连接、内连接、全连接
    CSS中.和#区别
    斯坦福数据挖掘之LSH的应用
    N个元素的集合划分成互斥的两个子集的数目
    JDBC小结
    初识Java反射机制
    关于Java中重载的若干问题
    吐槽
    Tomcat
  • 原文地址:https://www.cnblogs.com/AngryZe/p/10022574.html
Copyright © 2020-2023  润新知