评论部分不刷新提交，用户体验感好。这里便使用ajax实现。
使用提交时，状态栏显示success，error
考虑到使用的是jQuery的ajax，首先便要导入jQuery库。本文使用的是jquery-1.12.4.min.js。
blog/base.html
{% block title %}{% endblock %}
** **
{% block header_extends %}{% endblock %}
之后我们便要实现异步这一功能，首先我们先给定form表单一个id值 form_comment，方便在js中使用
blog/blog_detail.html
创建ajax基本样式
blog/blog_detail.html
**
{% block script_extends %}
$("#comment_form").submit(function(){
// 异步提交
$.ajax({
url: '{% url 'update_comment' %}',
type: 'POST',
data: $(this).serialize(),
cache: false,
success: function(data){
console.log(data); // 打印出来
},
error: function(xhr){
console.log(xhr);
}
});
return false; // 截止提交
});
{% endblock %} **
处理返回数据(JSON样式)
comment/views.py
**
from django.http import JsonResponse
**
**
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'
else:
data['status'] = 'ERROR'
data['message'] = list(comment_form.errors.values())[0][0]
return JsonResponse(data)
**
测试状态
F12打开测试，点击console查看
succeess or error 状态.PNG
加载返回数据
在update_comment中添加返回的数据
comment/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'] = ment_time.strftime('%Y-%m-%d %H:%M:%S')
**
else:
data['status'] = 'ERROR'
data['message'] = list(comment_form.errors.values())[0][0]
return JsonResponse(data)
测试
加载数据.PNG
将数据插入到评论列表中
调制样式给评论列表一个id值 comment_list
blog/blog_detail.html
评论列表
**
{% for comment in comments %}
{{ comment.user.username }}
({{ ment_time|date:"Y-m-d H:n:s" }})：
{{ comment.text }}
{% empty %}
暂无评论
{% endfor %}
**
ajax中写入将后台JSON的数据加载到页面上
blog/blog_detail.html
{% block script_extends %}
$("#comment_form").submit(function(){
// 异步提交
$.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 = '
' + data['username'] +
' (' + data['comment_time'] + ')：' +
data['text'] + '
';
$("#comment_list").prepend(comment_html);
}
**
},
error: function(xhr){
console.log(xhr);
}
});
return false; // 截止提交
});
{% endblock %}
测试
加载返回的数据.PNG
附上最终完整代码，其中包含评论部分的ckeditor编辑
blog/blog_detail.html
{% block script_extends %}
$("#comment_form").submit(function(){
// 异步提交
$.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 = '
' + data['username'] +
' (' + data['comment_time'] + ')：' +
data['text'] + '
';
$("#comment_list").prepend(comment_html);
}
},
error: function(xhr){
console.log(xhr);
}
});
return false; // 截止提交
});
{% endblock %}
