評論部分不刷新提交，用戶體驗感好。這里便使用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 %}

總結

以上是生活随笔為你收集整理的ajax读取评论数据,评论提交使用ajax提交实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。