DjangoとAjaxを使っていいねボタンを実装します。
いいねボタンは以下のようにします。
・記事一つ一つにつける
・いいねボタンは何回も押せる
・いいねボタンは「いいね (数字)」のようにしてボタンが押されるたびにかっこの中の数字が増えるようにする。
urls.py
from django.urls import path
from . import views
app_name = 'article'
urlpatterns = [
path('<int:article_id>/like/', views.like, name='like'),
]
views.py
from django.http import Http404
# データをJSON型に変換する
from django.shortcuts import get_object_or_404
from django.http import JsonResponse
from .models import Article
def like(request, book_id):
try:
article = Article.objects.get(id=article_id)
# 記事が存在しない時はエラーメッセージを表示する
except Article.DoesNotExist:
raise Http404
# この関数が呼び出された時にlikeに1を足して保存する
article.like += 1
article.save()
article = get_object_or_404(Article, id=article_id)
return JsonResponse({"article_like": article.like, "article_id": article.id})
index.html
<!--JQuery-->
<script src="https://code.jquery.com/jquery-3.5.0.js"
integrity="sha256-r/AaFHrszJtwpe+tHyNi/XCfMxYpbsRg2Uqn0x3s2zc=" crossorigin="anonymous"></script>
<!--いいねボタン-->
<a href="javascript:void(0)" id="article_{{ article.id }}" class="like"
name="{{ article.id }}" type="button">いいね ({{ article.like }})</a>
<script type="text/javascript">
//cookie
function getCookie(name) {
var cookieValue = null;
if (document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) == (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
var csrftoken = getCookie('csrftoken');
function csrfSafeMethod(method) {
// these HTTP methods do not require CSRF protection
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
$.ajaxSetup({
crossDomain: false, // obviates need for sameOrigin test
beforeSend: function (xhr, settings) {
if (!csrfSafeMethod(settings.type)) {
xhr.setRequestHeader("X-CSRFToken", csrftoken);
}
}
});
//いいねボタンが押されたら非同期通信を行う
$('.like').on('click', function () {
var article_id = $(this).attr('name')
$.ajax({
type: 'POST',
method: 'POST',
url: article_id + '/like/',
data: {
'id': article_id
},
dataType: 'json'
}).done(function (data) {
//views.pyからarticle_id, article_likeをjson型のデータで受け取る
//'#article_' + String(data['article_id'])で記事それぞれのidを指定する
$('#article_' + String(data['article_id'])).text('いいね' + '(' + String(data['article_like']) + ')');
})
});
</script>
これでいいねボタンがクリックされてもリロードなしでボタンの中身を更新できます!
間違い等あればご指摘していただけると嬉しいです!
最後まで読んでいただきありがとうございました!