Django新手求助：如何将JS获取的select值传入get_context_data

1. 修复AJAX请求的CSRF验证问题 #

Django默认拦截未携带CSRF令牌的POST请求，先修改JavaScript代码添加令牌验证：

$(function () {  
    $('select[name="reporteFecha"]').on('change', function () {
        var fecha = $(this).val();
        $.ajax({
            url: window.location.pathname,
            type: 'POST',
            headers: {
                'X-CSRFToken': $('input[name="csrfmiddlewaretoken"]').val()
            },
            data: {
                'action': 'search_fecha',
                'fecha': fecha
            },
            dataType: 'json',
            success: function(response) {
                // 调用自定义函数渲染返回的数据
                renderConsumoElect(response.ce_data);
            }
        })
    });

    // 动态渲染数据到页面的函数
    function renderConsumoElect(data) {
        var container = $('#ce-container');
        container.empty();
        // 替换成你需要展示的字段
        data.forEach(function(item) {
            var html = `<div>${item.fecha} - ${item.consumo}</div>`;
            container.append(html);
        });
    }
});

确保模板中已通过{% csrf_token %}生成CSRF令牌输入框。

2. 修改视图处理AJAX请求 #

假设你用的是类视图，重写post方法处理AJAX请求，同时在get_context_data中处理页面初始加载的默认数据：

from django.http import JsonResponse
from django.views.generic import TemplateView

class ReporteView(TemplateView):
    template_name = 'tu_reporte_template.html'

    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)
        # 初始加载时，可通过GET参数获取日期（可选），默认展示全部数据
        fecha = self.request.GET.get('fecha')
        CE = ConsumoElect.objects.filter(fecha=fecha) if fecha else ConsumoElect.objects.all()

        context.update({
            'CE': CE,
            'title': 'Reporte de Control de Electricidad',
            'entity': 'Reporte Electricidad',
            'list_url': reverse_lazy('cont_elect:Reporte_list'),
            'form': ReportForm(),
        })
        return context

    def post(self, request, *args, **kwargs):
        action = request.POST.get('action')
        if action == 'search_fecha':
            fecha = request.POST.get('fecha')
            # 提取需要展示的字段，转成可序列化的字典列表
            ce_data = list(ConsumoElect.objects.filter(fecha=fecha).values('id', 'fecha', 'consumo'))
            return JsonResponse({'ce_data': ce_data})
        return JsonResponse({'error': 'Acción inválida'}, status=400)

3. 模板中准备数据展示容器 #

在模板里添加容器，用于展示初始数据和AJAX返回的动态数据：

<select name="reporteFecha">
    <!-- 填充你的日期选项 -->
    <option value="2024-01-01">2024-01-01</option>
    <option value="2024-01-02">2024-01-02</option>
</select>

<!-- 数据展示容器 -->
<div id="ce-container">
    <!-- 初始加载的默认数据 -->
    {% for item in CE %}
        <div>{{ item.fecha }} - {{ item.consumo }}</div>
    {% endfor %}
</div>

关键说明 #

• get_context_data仅在页面初始加载或刷新时执行，无法直接获取AJAX异步传递的值，因为AJAX请求是页面加载完成后才发送的。
• 正确流程：AJAX发送请求 → 视图post方法处理请求并返回JSON数据 → 前端JS接收数据后动态更新页面。
• 若不需要异步更新，也可在select变化时跳转页面并携带GET参数（如window.location.href = window.location.pathname + '?fecha=' + fecha），此时get_context_data可通过self.request.GET.get('fecha')拿到值，重新渲染整个页面。

内容的提问来源于stack exchange，提问作者Julio Cesar Sori Gomez