Django：在AJAX上将列表传递到模板的正确方法

Question

我有2列单选按钮：

1）尺寸，
         2）数量。

我需要添加第三个名称：

3）价格。

此价格列将通过AJAX生成。我将对视图prices进行AJAX调用，并返回价格列表：

<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);

});