使用Ajax时Django CBV的get_context_data无法正常传递上下文至HTML

1. 后端逻辑的致命错误 #

先看你的get_context_data代码，这是问题的核心：

if self.request.is_ajax():
    if tab_keyword == '#':
        tab_keyword = None
    else:
        tab_keyword = None

不管tab_keyword传入的是什么值，只要是Ajax请求，最后都会被设置为None！这直接导致context['keyword']永远是None，前端自然无法显示有效值。

修正后的后端代码：

from django.http import JsonResponse

def get_context_data(self, **kwargs):
    context = super().get_context_data(**kwargs)
    tab_keyword = self.request.GET.get('tab_keyword')
    
    # 注意：Django 3.1+ 已弃用request.is_ajax()，改用请求头判断
    is_ajax = self.request.headers.get('X-Requested-With') == 'XMLHttpRequest'
    
    if is_ajax:
        # 只有当tab_keyword是'#'时才设为None，否则保留传入值
        if tab_keyword == '#':
            tab_keyword = None
    
    context['keyword'] = tab_keyword
    
    # 关键：Ajax请求需要单独返回响应，不能只靠context（CBV默认返回完整模板）
    if is_ajax:
        # 返回JSON数据，方便前端处理
        return JsonResponse({'keyword': tab_keyword})
    
    return context

2. Ajax请求未处理响应 #

你的Ajax代码只发送了请求，但没有处理后端返回的结果。因为Ajax是异步请求，不会自动刷新页面，初始渲染的{{ keyword }}不会自动更新，必须手动用JavaScript更新DOM。

修正后的Ajax代码：

$('.load-more-btn').on('click', function(e) {
    e.preventDefault()
    $.ajax({
        type: 'GET',
        url: '/',
        data: {
            tab_keyword: '#' + $('.nav-link.active.show').html()
            // GET请求不需要csrfmiddlewaretoken，POST/PUT等修改请求才需要，这里可以去掉
        },
        dataType: 'json', // 明确指定接收JSON格式
        success:function(response) {
            // 假设页面上有一个用于显示keyword的元素（比如id="keyword-display"）
            $('#keyword-display').text(response.keyword);
            // 如果后端返回的是HTML片段，就用.html(response)替换
        },
        error: function(xhr) {
            console.error('请求失败:', xhr.responseText);
        }
    })
})

3. 额外注意事项 #

• 如果你的Django版本低于3.1，可以继续用self.request.is_ajax()，但建议升级后改用请求头判断。
• 确保前端页面上存在对应的DOM元素来显示keyword，比如：

  <div id="keyword-display">{{ keyword }}</div>
  

• 测试时可以在后端打印tab_keyword的值，确认是否正确获取到前端传入的参数：

  print("Received tab_keyword:", tab_keyword)
  

内容的提问来源于stack exchange，提问作者Jay P.