Почему не работает кнопка?

Question

[rustamXx]

Рендерю товар через цикл if и for почему-то на первом товаре кнопка добавить в корзину работает как надо, а на всех остальных просто перебрасывает на страницу вот с такой ссылкой:

http://127.0.0.1:8000/basket_adding/?csrfmiddlewaretoken=l5XHOWjfGJVs8MXozFm4KVqJcXYLJmcAJ7zLyNbcw2efMdjEuCRDvpz5tyIibhEZ

HTML

<div class="tab-content ml-2 mr-2 ">
                    <div class="tab-pane fade show active" id="rolls" role="tabpanel">
                        <div class="row">
                            {% for p in posts %}
                            {%if p.category.name == "Роллы"%}
                            <div class=" col-xl-3  col-lg-4 col-sm-6 col-6 mt-3">
                                <div class="single-food" style="background-color: #efefef;">
                                    <div class="food-img">
                                        <img src="{{p.image.url}}"
                                             class="img-fluid" alt="">
                                    </div>
                                    <div class="food-content m-3">
                                        <div class="d-flex justify-content-between mt-3">
                                            <h5>{{ p.name }}</h5>
                                            <span class="style-change"><p style="color: red">{{p.price}}Р </p></span>
                                        </div>

                                        <p class="mb-0">{{p.description}}.</p>
                                    </div>
                                     <form id="form_buying_product" class="form-inline" action="{% url 'basket_adding' %}">{% csrf_token %}
                                        <div class="form-group mb-3">
                                            <button class="btn btn-outline-dark ml-2 btn-sm" type="submit"
                                                    id="submit_btn"
                                                    data-product_id = "{{p.id}}"
                                                    data-product_name = "{{p.name}}"
                                                    data-product_price = "{{p.price}}"
                                            >
                                                <p>Добавить в корзину</p>
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                            {% endif %}
                            {% endfor %}
                        </div>
                    </div>

views.py

from django.http import JsonResponse
from .models import OrderInBasket


def basket_adding(request):
    return_dict = dict()
    session_key = request.session.session_key

    data = request.POST
    product_id = data.get("product_id")
    nmb = data.get("nmb")

    new_product = OrderInBasket.objects.create(session_key=session_key, product_id=product_id, is_active=True)
    products_total_nmb = OrderInBasket.objects.filter(session_key=session_key, is_active=True).count()
    return_dict["products_total_nmb"] = products_total_nmb

    return JsonResponse(return_dict)

url

from django.urls import path
from . import views

urlpatterns = [
    path('basket_adding/', views.basket_adding, name='basket_adding'),
]

scripts

$(document).ready(function(){
    var form = $('#form_buying_product');
    console.log(form);


    form.on('submit', function(e){
        e.preventDefault();
        console.log('123');
        var nmb = $('#number').val();
        console.log(nmb);
        var submit_btn = $('#submit_btn');
        var product_id = submit_btn.data("product_id")
        var product_name = submit_btn.data("product_name")
        var product_price = submit_btn.data("product_price")
        var product_img = submit_btn.data("product_img")
        console.log(product_id);
        console.log(product_name);
        console.log(product_price);
        console.log(product_img);


        var data = {};
        data.product_id = product_id;
        data.nmb = nmb;
        var csrf_token = $('#form_buying_product [name="csrfmiddlewaretoken"]').val();
        data["csrfmiddlewaretoken"] = csrf_token;

        var url = form.attr("action");
        console.log(data)
        $.ajax({
             url: url,
             type: 'POST',
             data: data,
             cache: true,
             success: function (data) {
                 console.log("OK");
                 console.log(data.products_total_nmb);
                 console.log(data.total_nmb);
                 if (data.products_total_nmb){
                    $('#basket_total_nmb').text(data.products_total_nmb);
                 }


             },
             error: function(){
                 console.log("error")
             }
         })

    });

});

Answer 1

[serhiops]

1. Как помне, способ, которым вы решили это реализовать довольно странный. На практике чаще всего в похожих случаях использут DRF.
2. Суда по url, который у вас формулируется, можно сказать, что неполадку стоит искать с ключом csrf. Попробуйте добавить такую js-функцию и немного изменить ваш ajax post запрос.
Функция:

const getCookie = name => {
    let cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        let cookies = document.cookie.split(';');
        for (let i = 0; i < cookies.length; i++) {
            let cookie = cookies[i].trim();
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}

ajax post-запрос:

$.ajax({
        url: URL,
        type: 'POST',
        data: {
           ваши данные
            csrfmiddlewaretoken: getCookie('csrftoken'),  //это мы берем csrf-токен
        },
       /* Остальные параметры */
        success: function (response) { },
        error: function (rs, e) {
            console.log(rs.responseText);
        }
    });