如何使用Django模板在javascript中访问ajax jquery中的模板变量

Question

我有一个包含 ajax jquery 的 javascript，它根据返回的数据刷新模板，如下所示 -

product-filter.js 在代码下方

$(document).ready(function(){
    $(".ajaxLoader").hide();
    $(".filter-checkbox").on('click',function(){
        var _filterObj={};
        $(".filter-checkbox").each(function(index,ele){
            var _filterVal=$(this).val();
            var _filterKey=$(this).data('filter');
            _filterObj[_filterKey]=Array.from(document.querySelectorAll('input[data-filter='+_filterKey+']:checked')).map(function(el){
                return el.value;
            });
        });
        //Run Ajax
        $.ajax({
            url:'/filter-data_b/1',
            data: _filterObj,
            dataType: 'json',
            beforeSend: function(){
                $(".ajaxLoader").hide();
            },
            success:function(res){
                console.log(res);
                $("#filteredProducts_b").html(res.data);
                $(".ajaxLoader").hide();
            }
        })
    });

我可以使用 /filter-data_b/1 来实现它，其中 1 是硬编码的brand_id，我想知道如何从调用 product-filter.js 的模板中获取它 views.py和urls.py中的/filter-data_b/1代码如下所示

urls.py

urlpatterns = [
    path('', views.home,name='home'),
    path('brand_product_list/<int:brand_id>', views.brand_product_list,name='brand_product_list'),
    path('filter-data_b/<int:brand_id>',views.filter_data_b,name='filter_data_b'),
]

views.py 是

def filter_data_b(request,brand_id):
    colors=request.GET.getlist('color[]')
    categories=request.GET.getlist('category[]')
    brands=request.GET.getlist('brand[]')
    sizes=request.GET.getlist('size[]')
    flavors=request.GET.getlist('flavor[]')
    allProducts=ProductAttribute.objects.filter(brand=brand_id).order_by('-id').distinct()
    if len(colors)>0:
        allProducts=allProducts.filter(productattribute__color__id__in=colors).distinct()
    if len(categories)>0:
        allProducts=allProducts.filter(category__id__in=categories).distinct()
    if len(brands)>0:
        allProducts=allProducts.filter(brand__id__in=brands).distinct()
    if len(sizes)>0:
        allProducts=allProducts.filter(productattribute__size__id__in=sizes).distinct()
    if len(flavors)>0:
        allProducts=allProducts.filter(productattribute__flavor__id__in=flavors).distinct()
    t=render_to_string('ajax/product-list_b.html',{'data':allProducts})
    return JsonResponse({'data':t})

Answer 1

这是在外部 .js 文件中访问 Django 模板变量的方法：

1. 在您调用外部 .js 文件的模板中

    // The order is matter, declare the variable before try to access in your external .js file
    <script>
        let object_id = {{object_id}}  // Assume that 'object_id' is in the the context data of the template.
        let url = {% url 'filter_data_b' brandid %}
    </script> 
    <script src="{% static 'product-filter.js' %}"></script>
   

2. 在您的外部 .js 文件中

    $.ajax({
        url: url, // Declared above
        ...  
    })