Django视图函数重定向后页面未更新问题排查

嘿，我看了你的代码和问题描述，核心问题出在前端AJAX请求的处理逻辑上——虽然后端已经正确执行重定向并跑完了quest函数，但前端没触发页面跳转，所以看起来页面还停留在create-usecase模板。

问题根源拆解 #

你点击"Next"按钮时用了AJAX发送POST请求，但AJAX的特性是：它会自动跟进后端返回的302重定向，去请求/create-usecase/quest/并拿到返回的"test"内容，但它不会主动让浏览器刷新或跳转页面。这就是为什么控制台能看到quest函数的日志，页面却没变化。

看你的按钮点击代码，success回调里完全没处理跳转：

$('#nextBtn').click(function(e){
    e.preventDefault();
    $.ajax({
        // ... 请求配置
        success:function() {
            // 这里空着，没做任何页面跳转操作
        }
    })
});

两种修复方案 #

方案一：给AJAX添加跳转逻辑 #

既然后端已经把需要的信息存在session里了，直接在AJAX请求成功后手动让页面跳转到quest的URL就行：

$('#nextBtn').click(function(e){
    e.preventDefault();
    $.ajax({
        type: 'POST',
        url: '/create-usecase/',
        data: {
            usecase_name: $('#usecase_name').val(),
            category: $('#category-list').val(),
            sub_category: flag,
            csrfmiddlewaretoken: '{{ csrf_token }}'
        },
        success:function() {
            // 手动跳转到quest页面
            window.location.href = '/create-usecase/quest/';
        }
    })
});

方案二：放弃AJAX，用原生表单提交 #

如果这个提交不需要异步更新页面，完全可以简化成普通表单提交，这样后端的重定向会直接触发页面跳转：

1. 先修改表单标签，加上method和action，别忘了CSRF令牌：

<form method="POST" action="/create-usecase/">
    {% csrf_token %}
    <!-- 原来的表单内容保持不变 -->
    <div class="row center">
        <button type="submit" id="nextBtn" class="btn waves-effect waves-light orange">Next</button>
    </div>
</form>

2. 给表单加个隐藏字段存sub_category的值（因为原来的单选框是JS动态处理的）：

<input type="hidden" name="sub_category" id="sub_category_hidden" value="">

3. 修改subCategoryValue函数，把选中的值同步到隐藏字段：

function subCategoryValue(v) {
    flag = v;
    $('#sub_category_hidden').val(v); // 同步到隐藏字段
    $('#nextBtn').show();
}

4. 最后删掉#nextBtn的AJAX点击事件代码就好。

验证说明 #

从你的控制台日志能看出来，后端逻辑完全没问题：

[17/May/2018 13:57:23] "POST /create-usecase/ HTTP/1.1" 302 0
questions! test 1 test1
[17/May/2018 13:57:23] "GET /create-usecase/quest/ HTTP/1.1" 200 4

quest函数已经执行，也返回了响应，只要修复前端的跳转逻辑，页面就能正常更新了。

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