ajax读取评论数据,评论提交使用ajax提交实现

评论部分不刷新提交，用户体验感好。这里便使用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'] = comment.comment_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 }}

({{ comment.comment_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 %}