Почему не работает Ajax в Django?

Question

[Александр Бондаренко]

Пытаюсь сделать добавление в корзину через ajax, получаю ошибку 403 Forbidden

<script>
    $( ".add_to_cart" ).submit(function(addr) {
        $.ajax({
        type: "POST",
        url: String($('.add_to_cart').data("action")),
        success: function() {
            $('.main-offer_list').html(`{% for item in cart %}
        {% with product=item.product %}
        <div class="main-offer_list-item">
            <div class="main-offer_list-info">
                <div class="main-offer_list-title">
                    {{ product.name }}
                </div>
                <!-- <div class="main-offer_list-calc">
                    1
                </div> -->
            </div>
            <img src="{{ product.image.url }}" alt="">
            <div class="main-offer_list-close">
                <a href="{% url 'cart:cart_remove' product.id %}"><img class="img-svg" src="{% static 'img/close.svg' %}" alt=""></a>
            </div>
        </div>
        {% endwith %}
        {% endfor %}`);
        } 
      });
});
</script>

Как можно переделать мой код, или что нужно сделать чтобы данные передавались?

Answer 1

[Сергей Горностаев]

Потому что вы документацию не потрудились прочитать.

Comments

[Александр Бондаренко]

Спасибо за ответ, понимаю что задолбал, но я сделал код как в документации и товар не добавляется в корзину, хотя csrf вроде как передаю

function getCookie(name) {
        let cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            const cookies = document.cookie.split(';');
            for (let i = 0; i < cookies.length; i++) {
                const cookie = cookies[i].trim();
                // 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;
    }
    const csrftoken = getCookie('csrftoken');
    function csrfSafeMethod(method) {
    // these HTTP methods do not require CSRF protection
    return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
$.ajaxSetup({
    beforeSend: function(xhr, settings) {
        if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
            xhr.setRequestHeader("X-CSRFToken", csrftoken);
        }
    }
});
</script>
<script>
    $( ".add_to_cart" ).submit(function(addr) {
        $.ajax({
        type: "POST",
        url: String($('.add_to_cart').data("action")),
        data: {csrfmiddlewaretoken: csrftoken
            },
        success: function() {
            $('.main-offer_list').html(`{% for item in cart %}
        {% with product=item.product %}
        <div class="main-offer_list-item">
            <div class="main-offer_list-info">
                <div class="main-offer_list-title">
                    {{ product.name }}
                </div>
                <!-- <div class="main-offer_list-calc">
                    1
                </div> -->
            </div>
            <img src="{{ product.image.url }}" alt="">
            <div class="main-offer_list-close">
                <a href="{% url 'cart:cart_remove' product.id %}"><img class="img-svg" src="{% static 'img/close.svg' %}" alt=""></a>
            </div>
        </div>
        {% endwith %}
        {% endfor %}`);
        } 
      });
});

[Александр Бондаренко]

Всё ошибку нашел, спасибо)

Answer 2

[deepblack]

Не работает потому что не передается CSRFToken.

Как можно переделать мой код, или что нужно сделать чтобы данные передавались?

• Не использовать jQuery, вместо него использовать Fetch
  
• Передавать вместе с запросом CSRFToken
  

Не удержался

Если работает то в чём дело?

P.S. Не соизволите отметить ответ на вопрос решеним?
Как создать корзину в джанго без перехода на другие страницы?