Django - ошибка метода POST "POST /......./ HTTP / 1.1" 405 0 с Ajax

Question

Я использую метод POST, так как мне нужно изменить базу данных.Но каждый раз, когда я использовал метод POST, эта ошибка возникала.Каждый раз, когда я нажимаю кнопку, страница не будет загружаться и говорить "POST /book/go-action/ HTTP/1.1" 405 0.Нет разницы, когда я использую q = request.POST["quantity"] или q = request.POST.get('quantity', '').Если я использую метод GET, проблема не возникнет, но метод GET не сможет удовлетворить потребности.Кроме того, мне не нужно action в форме, потому что мне не нужно перенаправлять страницу куда-либо, и я использую ajax для вызова представления функции.Как я могу исправить проблему?

Обновлено:

Проблема была вызвана отсутствием action="{% url 'cart:add_to_cart' %}".Но я не хочу, чтобы он перенаправлял на другую страницу, поэтому я использую Ajax вместо action.Если использовать action, то Ajax станет бессмысленным.

book / detail.html:

<script>
    $(document).ready(function () {
        $("#add").click(function () {
            alert('clicked');
            $.ajax({
                url: '{% url "cart:add_to_cart" %}',
                type: "POST",
                dataType: 'json',
                success: function (response) {
                    $("#cartButton").text("Cart" + "(" + response.quantity + ")");
                },
                error: function (response) {
                    alert('Got an error');
                }
            });
        });
    });
</script>

<form method="post"> {% csrf_token %}
    <select name="quantity">
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>
    <input name="bookID" value=" {{ book.id }} " hidden>
    <button id="add" type="submit"> Add to Cart</button>
</form>

cart / views.py:

def add_books(request):

    c = Cart.objects.get(user=request.user)

    if request.method == 'POST':
        # q = request.POST["quantity"]
        # book_id = request.POST["bookID"]

        q = request.POST.get('quantity', '')
        book_id = request.POST.get('bookID', '')

       # the rest of the code here         

        return JsonResponse(response)

корзина / urls.py:

app_name = 'cart'
urlpatterns = [
    path('add_books/', views.add_books, name='add_to_cart')
]

book / urls.py:

app_name = 'book'
urlpatterns = [
    path('<slug:slug>/', views.BookDetailView.as_view(), name='detail'),
 name='category_search'),
]

Answer 1

Проблема в том, что ваша форма отправляет и отправляет запрос на /book/go-action/, который, как я полагаю, является маршрутом для представления, на котором находится форма, но маршрут, по которому должен идти POST, равен /add_books, как определено в вашемurls.py.

Чтобы это исправить, вам нужно добавить атрибут action к вашему <form>.Вот пример:

<form method="post" action="/add_books"> {% csrf_token %}
    <select name="quantity">
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>
    <input name="bookID" value=" {{ book.id }} " hidden>
    <button id="add" type="submit"> Add to Cart</button>
</form>

Редактировать : Ajax-код (независимо от моего кода выше)

Я думаю, что главная проблема здесь заключается в том, что в то время как событие clickфункция будет работать должным образом (насколько я могу судить), после того, как она выполнится, событие submit все еще инициируется, и наступает действие по умолчанию.Чтобы исправить это, вам нужно добавить event в качестве аргумента функции и вызвать preventDefault для этого event, чтобы не происходило отправка по умолчанию.

Вот как это выглядит:

<script>
    $(document).ready(function () {
        $("#add").click(function (event) {
            event.preventDefault();
            alert('clicked');
            $.ajax({
                url: '{% url "cart:add_to_cart" %}',
                type: "POST",
                dataType: 'json',
                success: function (response) {
                    $("#cartButton").text("Cart" + "(" + response.quantity + ")");
                },
                error: function (response) {
                    alert('Got an error');
                }
            });
        });
    });
</script>