Django: правильный способ передачи списка в шаблон в AJAX Готово

Question

У меня есть 2 столбца переключателей:

1) Размеры,
2) Количество.

Мне нужно добавить третий, который называется:

3) Цены.

Этот столбец «Цены» будет создан через AJAX.Я сделаю AJAX-вызов для моего представления prices, который возвращает список цен:

<class 'list'>
[70, 90, 130, 160, 240, 400, 550]

В случае успешного завершения AJAX мне нужно передать этот список в шаблон.

ВАЖНО: Я не хочу перерисовывать всю страницу, только обновлять столбец цен.

Мне нужно иметь доступ к его значению, например: prices.0, prices.1, prices.2 и т. Д.

Так что я могу сделать: <span>{{ price.0 }}</span>

views.py

from django.http.response import JsonResponse
def prices(request):
    size_selected = request.GET.get("size_selected")
    c_slug = 'stickers'
    product_slug = 'stickers-transparentes'



    prices = list(costo_de_los_productos.objects.filter(category=Category.objects.get(slug=c_slug),
                                              product=Product.objects.get(slug=product_slug),
                                              size=size_selected).values_list("price",flat=True))

    return JsonResponse({'prices': prices})

Вызов AJAX:

<script>

                function get_prices() {

                    var size_selected = $('input[name=size]:checked').val();
                    req = $.ajax({
                        url: "/prices/",
                        data: { // Pass parameters in separate object
                            size_selected: size_selected
                        },
                    });

                    $('#prices').fadeOut(500).fadeIn(1000);


                    req.done(function (response) {
                        $('#prices').append(response.prices);
                    });
                }


                ///

                $("document").ready(function () {

                    $('input[name=size]').change(function () {
                        get_prices();
                    });

                });

                ///


            </script>

HTML:

<div id="size">

       <legend class="text-size16 bold-font"> SIZES: </legend>


                                        <ul class="form-items">
                                            <li>
                                                <span>
                                                   <input type="radio" name="size" value="5cm x 5cm" id="id_size_0" required="" checked="checked">
                                                    5cm x 5cm
                                                </span>
                                            </li>
                                            <li>
                                                <span>
                                                   <input type="radio" name="size" value="5cm x 5cm" id="id_size_1" required="" >
                                                   7cm x 7cm
                                                </span>
                                            </li>
                                            <li>
                                               <span>
                                                   <input type="radio" name="size" value="5cm x 5cm" id="id_size_0" required="">
                                                    10cm x 10cm
                                                </span>
                                            </li>
                                            <li>
                                                <span>
                                                   <input type="radio" name="size" value="5cm x 5cm" id="id_size_2" required="">
                                                    13cm x 13cm
                                                </span>
                                            </li>
                                        </ul>

                                    </div>


                                    <div id="quantity">

                                        <legend class="text-size16 bold-font"> Quantities</legend>

                                        <ul class="form-items">
                                            <li>
                                            <span>
                                                   <input type="radio" name="size" value="50" id="id_quantity_0" required="">
                                                    50
                                                </span>

                                                <span class="savings savings_50"></span>
                                            </li>
                                            <li>
                                            <span>
                                                   <input type="radio" name="size" value="50" id="id_quantity_1" required="">
                                                    100
                                                </span>
                                                <span class="savings savings_100"></span>
                                            </li>
                                            <li>
                                            <span>
                                                   <input type="radio" name="size" value="50" id="id_quantity_2" required="">
                                                    200
                                                </span>

                                                <span class="savings savings_200"></span>
                                            </li>
                                            <li>
                                            <span>
                                                   <input type="radio" name="size" value="50" id="id_quantity_3" required="">
                                                    300
                                                </span>

                                                <span class="savings savings_300"></span>
                                            </li>
                                            <li>
                                            <span>
                                                   <input type="radio" name="size" value="50" id="id_quantity_4" required="">
                                                    500
                                                </span>

                                                <span class="savings savings_500"></span>
                                            </li>
                                            <li>
                                            <span>
                                                   <input type="radio" name="size" value="50" id="id_quantity_5" required="">
                                                    1000
                                                </span>



                                                <span class="savings savings_1000"></span>
                                            </li>
                                        </ul>

                                    </div>
                                    <div id="prices">

                                    </div>

Answer 1

После визуализации шаблона вы не можете использовать язык шаблонов django.Вы должны обрабатывать все, используя Javascript / jQuery.

После получения ответа AJAX вам придется удалить все параметры и добавить обновленные параметры.

req.done(function (response) {
     $('#prices').empty();
     var prices = response.prices;
     var list = '';
     for (var j = 0; j < prices.length; j++){
        list += "<span><input type='radio' name='price' value='" + prices[j] + "'>" + prices[j] + "</span>";
     }
     $('#prices').html(list);

});