0

Всех приветствую! Пишу небольшой интернет-магазин. Возникла необходимость сохранять выбранные товары посетителем в LocalStorage, а затем при помощи Ajax запроса кидать его во view Django и отображать пользователю для создания заказа.

Суть вопроса: Ajax запрос выполняется, передает функции view данные. Но в шаблон ничего не возвращается. (в коде много принтую и вывожу в консоль для контроля).

-views.py-

@csrf_exempt
def get_data(request):
    context = {}
    print('----function get_data IN----')
    local_storage = request.POST.get('cart')
    print('----', type(local_storage))
    print('----', local_storage)
    if local_storage:
        d = json.loads(local_storage)
        print('----', type(d))
        print('->', d)
        ids = []
        for i in d:
            print('id: ', i['prod_id'])
            ids.append(i['prod_id'])
        products = Product.objects.filter(id__in=ids)
        print('products: ', products)
        context = {"products": products}
    template = loader.get_template('cart/detail.html')
    return HttpResponse(template.render(context))

def cart_detail(request):
    print('---function cart_detail IN----')
    return render(request, 'cart/detail.html')

-cart.js-

function fullCart(){
  if (localStorage['cart'] != ""){
    console.log('data: '+localStorage['cart'])
    $.ajax({
      type: "POST",
      url: "get_cart/",
      data: {
          'cart':  localStorage['cart'],
        },
      success: function (data){
          console.log('DATA sended to Server')
        }
    })
  }
}

-urls.py-

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

После подсказки - добавил 2 URL и 2 VIEW соответственно: один отображает шаблон, второй обрабатывает AJAX и отправляет в шаблон данные.

Но в шаблоне по прежнему ничего нет.

{% extends 'main/base.html' %}

{% block title %}
  Корзина с покупками
{% endblock %}

{% block content %}
{% load static %}

<section class="checkout-page">
    <div class="container">

        <div class="heading-sub">
            <h3 class="pull-left">Корзина</h3>
            <div class="clearfix"></div>
        </div>

        <ul class="breadcrumb">
            <li><a class="active">01. Ваша корзина</a></li>
            <li><a>02. Оформление</a></li>
            <li><a>03. Потдверждение</a></li>
        </ul>

        <div class="checkout-cart-form">

            <div class="row">
                <div class="col-md-8 col-sm-12">
                    <table class="table">
                        <thead>
                            <tr>
                                <th scope="col">Фото</th>
                                <th scope="col">Наименование</th>
                                <th scope="col">Цена</th>
                                <th scope="col" colspan="2">Количество</th>
                                <th scope="col">ИТОГ</th>
                                <th scope="col">-</th>
                            </tr>
                        </thead>
                        <tbody>
                        {% for product in products %}
                            <tr>
                                <th>
                                    <a href="{% url 'shop:one-product' product.id %}">
                                        <img src="" alt="{{ product.title }}" class="img-responsive" style="width: 75px; height: 75px;">
                                    </a>
                                </th>
                                <td class="cart_prod">
                                    <a href="{% url 'shop:one-product' product.id %}">
                                        {{ product.title }}
                                    </a>
                                </td>
                                <td class="cart_prod">
                                    <p class="price">{{ product.price }} &#8381;</p>
                                </td>
                                <td class="cart_prod">
                                  <button onclick="javascript:minusQty({{ product.id }});" type="button" class="btn btn-outline-secondary quantity-left-minus">-</button>
                                   <input class="qty-card" type="text" name="quantity" value="1">
                                   <button onclick="javascript:plusQty({{ product.id }});" type="button" class="btn btn-outline-secondary quantity-right-plus">+</button>
                                </td>
                                <td class="cart_prod form-inline">
                                    <button id="{{ product.id }}" type="button" role="button" class="link-ver1 addcart-ver2" onclick="javascript:addToCart({{i.id}}, {{ i.price }});">
                                        <span class="icon"></span>В корзину
                                    </button>

                                </td>
                                <td class="cart_prod">
                                    <p class="price">
                                        Итоговая &#8381;
                                    </p>
                                </td>
                                <td class="cart_prod">
                                  <form action="#" method="POST">
                                    <input type='image' src="{% static 'cart/img/remove.png' %}" alt="Удалить" style="width: 20px; height:20px; border: 0;">
                                  </form>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>

                </div>
            </div>
    </div>
</section>

{% endblock %}
6
  • 1
    из того, что я вижу в urls.py получается, что он в первый раз загружает твой view при загрузке страницы, и так как is_ajax не выполняется, то он не запрашивает никаких данных, а просто генерирует страницу, затем судя по всему у тебя и дет запрос с загруженной страницы при отработке твоего ajax запроса. так же непонятно, почему ты ожидаешь, что что-то должно измениться на странице после выполнения ajax запроса, ведь ты по сути просто выводишь сообщение в консоль о том, что запрос на сервер отослан Commented 11 июл. 2020 в 10:32
  • получается нужно 2 url - один обрабатывает загрузку шаблона, а второй - обрабатывает непосредственно Ajax запрос. так? Commented 11 июл. 2020 в 10:37
  • 1
    вообще можно и в одном, но непонятно зачем усложнять один view. ведь по идее он должен тебе выдавать разные данные. Когда просто загружается страница - весь html целиком и потом, когда идет апрос ajax нет смысла выдавать всю страницу целиком, можно отдать только необходимую часть Commented 11 июл. 2020 в 10:41
  • Переделал, в терминале теперь заходит всего 1 раз, получает данные. Но в шаблон идти по прежнему не хочет. Может не так отправляю? Commented 11 июл. 2020 в 11:29
  • покажи свой html файл с корзиной Commented 11 июл. 2020 в 12:55

1 ответ 1

1

Я бы разбил этот шаблон на 2 блока(условно) - вся страница и содержимое корзины непосредственно, что бы через ajax не отправлять лишние данные. cart/full_page.html

{% extends 'main/base.html' %}

{% block title %}
  Корзина с покупками
{% endblock %}

{% block content %}
{% load static %}

<section class="checkout-page">
    <div class="container">

        <div class="heading-sub">
            <h3 class="pull-left">Корзина</h3>
            <div class="clearfix"></div>
        </div>

        <ul class="breadcrumb">
            <li><a class="active">01. Ваша корзина</a></li>
            <li><a>02. Оформление</a></li>
            <li><a>03. Потдверждение</a></li>
        </ul>

        <div class="checkout-cart-form">

            <div class="row">
                <div class="col-md-8 col-sm-12">
                  {% include "cart/detail.html" %}
                </div>
            </div>
    </div>
</section>

{% endblock %}

дальше шаблон "cart/detail.html"

            <table id="tbl_cart" class="table">
                <thead>
                    <tr>
                        <th scope="col">Фото</th>
                        <th scope="col">Наименование</th>
                        <th scope="col">Цена</th>
                        <th scope="col" colspan="2">Количество</th>
                        <th scope="col">ИТОГ</th>
                        <th scope="col">-</th>
                    </tr>
                </thead>
                <tbody>
                {% for product in products %}
                    <tr>
                        <th>
                            <a href="{% url 'shop:one-product' product.id %}">
                                <img src="" alt="{{ product.title }}" class="img-responsive" style="width: 75px; height: 75px;">
                            </a>
                        </th>
                        <td class="cart_prod">
                            <a href="{% url 'shop:one-product' product.id %}">
                                {{ product.title }}
                            </a>
                        </td>
                        <td class="cart_prod">
                            <p class="price">{{ product.price }} &#8381;</p>
                        </td>
                        <td class="cart_prod">
                          <button onclick="javascript:minusQty({{ product.id }});" type="button" class="btn btn-outline-secondary quantity-left-minus">-</button>
                           <input class="qty-card" type="text" name="quantity" value="1">
                           <button onclick="javascript:plusQty({{ product.id }});" type="button" class="btn btn-outline-secondary quantity-right-plus">+</button>
                        </td>
                        <td class="cart_prod form-inline">
                            <button id="{{ product.id }}" type="button" role="button" class="link-ver1 addcart-ver2" onclick="javascript:addToCart({{i.id}}, {{ i.price }});">
                                <span class="icon"></span>В корзину
                            </button>

                        </td>
                        <td class="cart_prod">
                            <p class="price">
                                Итоговая &#8381;
                            </p>
                        </td>
                        <td class="cart_prod">
                          <form action="#" method="POST">
                            <input type='image' src="{% static 'cart/img/remove.png' %}" alt="Удалить" style="width: 20px; height:20px; border: 0;">
                          </form>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>

соответственно когда генерируешь целиком страницу отдаешь полный шаблон, а через ajax только сам блок с товарами.

from django.template.loader import render_to_string
from django.http import JsonResponse
...
def cart_detail(request):
    print('---function cart_detail IN----')
    return JsonResponse({
        'html': render_to_string(template="cart/detail.html"
    )})

Дальше, основное, чего у тебя нет в твоем ajax запросе. То, что ты никак не обрабатываешь полученный результат, поэтому у тебя данные на странице и не обновляются.

function fullCart(){
  if (localStorage['cart'] != ""){
    console.log('data: '+localStorage['cart'])
    $.ajax({
        type: "POST",
        url: "get_cart/",
        data: {
            'cart':  localStorage['cart'],
        },
        success: function (data) {
            $("#tbl_cart").replaceWith($(data.html));
        },
        dataType: "json"
    });
  }
}
6
  • Хммм, интересный способ, спасибо огромное! Реально, нужно было на 2 файла поделить, было бы проще! Вопрос правда возник, $("#tbl_cart").replace($(data.html)); - сюда он не заходит вообще. Commented 11 июл. 2020 в 14:14
  • т.е. получается, что он в раздел success не попадает после запуска ajax? Commented 11 июл. 2020 в 14:42
  • 1
    была ошибка, заменил replace на replaceWith Commented 11 июл. 2020 в 14:54
  • супер! заработало))) была еще мелочь одна: функция cart_detail(request): return render(request, 'cart/full_cart.html'). И все. А дальше, как подсказали: 'html': render_to_string('cart/detail.html', context), часть шаблона + данные которые изъял из запроса. Огромное спасибо за уделённое внимание! А заместо replace думал использовать innerHTML, но это все не то) Commented 11 июл. 2020 в 15:00
  • да, правил код в этом редакторе, а он не очень удобен, не заметил, что не все подчистил в скопированном коде Commented 11 июл. 2020 в 15:04

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.