1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Django + Ajaxでいいねボタンを実装

Posted at

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>

これでいいねボタンがクリックされてもリロードなしでボタンの中身を更新できます!
間違い等あればご指摘していただけると嬉しいです!
最後まで読んでいただきありがとうございました!

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?