Django e-commerce part47 Ajax Part1

Ajax を使う　part1

products/product_detail.html のform タグにidをつけていく

    <form id='add-form' method='GET' action="{% url 'cart' %}">

    <input class='form-control' type='number' name='qty' value='1' />

block jQuery にadd cartに関するajaxを書いていく。

<script>
{% block jquery %}
...

$("#submit-btn").click(function(event){
    event.preventDefault();
    var formData = $("#add-form").serialize();
    console.log(formData);
})

{% endblock %}

• submit-btnをclickした時に、
• preventDefault() で、本来の動作をpreventする（カートに移動する。）
• formDataに、add-formの実行データ？送信データ？を、シリアライズする。
• console.logに、formDataを表示させる。

シリアライズとは、ソフトウェア内部で扱っているデータを丸ごと、ファイルで保存したりネットワークで送受信することができるように変換すること。

.ajax　を設定する。

$("#submit-btn").click(function(event){
    event.preventDefault();
    var formData = $("#add-form").serialize();
    console.log(formData);
    $.ajax({
        type: "GET", //"POST"
        url: "{% url 'cart' %}",
        data: formData,
        success: function(data){
            console.log(data)
        },
        error: function(response, error){
            console.log(response)
            console.log(error)
        },

    })

carts/views.py を設定する

from django.http import HttpResponseRedirect, Http404, JsonResponse
...
    def get(self, request, *args, **kwargs):
        cart  = self.get_object()
        if request.is_ajax():
            print (request.GET.get("item"))
            return JsonResponse({"success": True})

• .ajaxで、指定したurl に、ajaxからアクセスする時に、requestに、ajaxが表示される。
• ajaxがある場合は、JsonResponseで、JSON形式の、success :True を返す。JsonResponseについては、以下のサイトを参照

Request and response objects | Django documentation | Django

carts/views.py にdeleteをつけてみる。

def get 
...
        if request.is_ajax():
            return JsonResponse({"deleted": delete_item})
...

JSON形式で、deleted : delete_item を返す。delete_itemは、getファンクションで、定義されているもの

さらに、item_addedも追加してみる。

    def get(self, request, *args, **kwargs):
...
            cart_item, created = CartItem.objects.get_or_create(cart=cart, item=item_instance) # ここを修正した。
            if created:
                item_added = True

            if delete_item:
                cart_item.delete()
            else:
                cart_item.quantity = qty
                cart_item.save()

        if request.is_ajax():
            return JsonResponse({"deleted": delete_item, "item_added": item_added })

• cart_item, created = CartItem.objects.get_or_create(cart=cart, item=item_instance) で、cart_itemがある場合は、getで、ない場合は、createする。

• createdがtrue の場合、item_added = Trueにする。

• item_addedをJsonresponseで返す。

• 全体として、すでにアイテムがある場合、削除する場合を区別するために、Jsonresponseを使っている。

product_detail.html のjqueryを修正する

$("#submit-btn").click(function(event){
    event.preventDefault();
    var formData = $("#add-form").serialize();
    console.log(formData);
    $.ajax({
        type: "GET", //"POST"
        url: "{% url 'cart' %}",
        data: formData,
        success: function(data){
            $("#jquery-message").text("Added " + data.item_added + " Deleted " + data.deleted)
        },
        error: function(response, error){
            // console.log(response)
            // console.log(error)
            $("#add-form").submit()
        },

    })
...
    <p id='jquery-message' class='lead'></p>