如何在Django模板中获取变量供JavaScript的JQuery AJAX使用

方案1：模板注入全局变量（最简单） #

1. 在你渲染brand_product_list的Django模板中，引入product-filter.js之前，加入如下代码：

<script>
// 从模板上下文获取brand_id注入到全局
const CURRENT_BRAND_ID = {{ brand_id }};
// 更推荐直接生成完整url，避免路径硬编码：
const FILTER_DATA_URL = "{% url 'filter_data_b' brand_id %}";
</script>

2. 修改product-filter.js里的ajax url配置：
   把原来的url:'/filter-data_b/1'替换为：

url: FILTER_DATA_URL,
// 如果没生成完整url，也可以手动拼接：url: `/filter-data_b/${CURRENT_BRAND_ID}`,

方案2：元素data属性（无全局变量污染，更规范） #

1. 在brand_product_list模板里，找一个页面上固定存在的元素（比如你用来放渲染结果的#filteredProducts_b容器），添加data属性存储brand_id：

<div id="filteredProducts_b" data-brand-id="{{ brand_id }}">
  <!-- 容器原有内容 -->
</div>

2. 修改product-filter.js代码，在触发ajax前先获取这个属性值：

// 放在ajax调用之前即可
const brandId = $("#filteredProducts_b").data("brand-id");
$.ajax({
    url: `/filter-data_b/${brandId}`,
    // 其余原有配置保持不变
})

可选优化 #

你现有代码里beforeSend回调写的是$(".ajaxLoader").hide()，不符合加载逻辑，建议改成$(".ajaxLoader").show()，这样请求过程中会显示加载动画，请求完成后再隐藏，用户体验更好。

内容的提问来源于stack exchange，提问作者shoonya007