Django 2.0中Ajax请求FormView后如何在同Div内实现重定向

嘿，我懂你现在的处境——用Ajax调用Django的FormView把模板渲染到页面的<div>里，但碰到了特定场景下需要重定向的问题对吧？这其实是Ajax请求的一个常见小坑，毕竟默认情况下Ajax不会自动处理后端的重定向响应，得前后端配合着来解决。我给你捋捋具体怎么做：

后端调整：返回重定向信号而非直接跳转 #

在你的LearnQuestion视图里，当触发重定向的条件满足时，不要直接返回redirect()（因为Ajax会忽略这个响应），而是返回一个包含重定向URL的JsonResponse。这样前端就能拿到信号，主动触发页面跳转。

修改后的视图代码示例：

from django.http import JsonResponse
from django.urls import reverse
from django.views.generic.edit import FormView

class LearnQuestion(FormView):
    form_class = SessionForm
    template_name = 'learn/learn_question.html'

    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)
        # 你的原有上下文逻辑，比如添加course_learn等数据
        return context

    def form_valid(self, form):
        # 替换成你实际的重定向判断逻辑，比如会话过期、完成所有题目等
        if self.request.session.get('is_finished', False):
            # 返回包含目标URL的JSON响应
            return JsonResponse({
                'redirect_url': reverse('learn:course_complete', kwargs={'pk': self.kwargs['pk']})
            })
        # 不需要重定向时，正常返回渲染的模板内容
        return super().form_valid(form)

    # 如果是GET请求场景下需要重定向，同样处理
    def get(self, request, *args, **kwargs):
        if not request.session.get('session_id', None):
            return JsonResponse({
                'redirect_url': reverse('learn:session_start')
            })
        return super().get(request, *args, **kwargs)

前端修改：判断响应类型并处理跳转 #

原来的load()方法只能处理HTML响应，没法识别JSON，所以我们换成更灵活的$.ajax()来发送请求，这样就能根据后端返回的内容决定是渲染模板还是跳转页面。

修改后的前端代码：

function loadNextQuestion() {
    $.ajax({
        url: "{% url 'learn:question' course_learn.pk %}?session=" + $('#session-id').val(),
        type: 'GET', // 如果是POST请求，改成'POST'并添加CSRF令牌
        success: function(response) {
            // 检查响应是否包含重定向URL
            if (response.redirect_url) {
                // 触发页面跳转
                window.location.href = response.redirect_url;
                return;
            }
            // 没有重定向信号，就把HTML内容渲染到目标div
            $('#question-box').html(response);
            // 这里放你原来的"other stuffs"逻辑，比如绑定事件、初始化组件等
        },
        error: function(xhr) {
            // 可选：处理请求失败的情况
            console.error('加载题目失败:', xhr.responseText);
        }
    });
}

额外提示（针对POST请求） #

如果你的FormView是处理POST请求，别忘了在Ajax配置里带上Django的CSRF令牌，避免校验失败：

// 在ajax配置里添加headers
headers: {
    'X-CSRFToken': $('input[name="csrfmiddlewaretoken"]').val()
}

这样就能完美实现特定场景下的重定向需求啦！

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