Django项目AJAX修改数据库后返回页面HTML未更新问题咨询

问题根因 #

你当前逻辑的核心矛盾是AJAX请求不会触发浏览器页面全局跳转：后端返回的HttpResponseRedirect是针对本次AJAX请求的响应，只会让AJAX内部去请求重定向的地址，不会让当前浏览器页面刷新，所以页面还是初始渲染的旧数据，只有手动刷新才会重新拉取后端最新数据渲染页面。

解决方案 #

这里提供两种常用的适配方案，可根据你的业务需求选择：

方案1：保留AJAX逻辑，请求成功后手动触发页面刷新

第一步：修改JavaScript代码，新增请求成功回调

document.getElementById("update_status_outreach").onchange = changeListener;
function changeListener() {
    var name = this.name.split("_____");
    var project_id = name[1];
    var outreach_id = name[0];
    var new_status = this.value;
    if(confirm("确认修改状态吗？")) {
        $.ajax({
            type: "POST",
            url: "{% url 'action:update_status_outreach' %}",
            data: {
                csrfmiddlewaretoken: "{{ csrf_token }}",
                'project_id': project_id,
                'outreach_id': outreach_id,
                'new_status': new_status
            },
            // 新增成功回调，请求完成后刷新页面
            success: function() {
                window.location.reload();
            }
        });
    }
}

第二步：优化后端视图（可选，重定向对AJAX无效可直接去掉）

from django.http import JsonResponse

@login_required(login_url='action:login')
def update_status_outreach(request):
    project_id = request.POST['project_id']
    outreach_id = request.POST['outreach_id']
    new_status = request.POST['new_status']
    jobproject = get_object_or_404(JobProject, id=project_id)
    if jobproject.owner != request.user:
        return JsonResponse({'code': 500, 'msg': '无权限'}, status=500)
    outreach_to_be_updated = Outreach.objects.get(id=outreach_id)
    outreach_to_be_updated.outreach_status = new_status
    outreach_to_be_updated.save()
    # 直接返回成功状态即可，不需要重定向
    return JsonResponse({'code': 200, 'msg': '修改成功'})

方案2：不使用AJAX，用原生表单提交，直接复用后端重定向逻辑

把选择框包裹在form标签内，无需额外写JS代码，提交后后端返回的重定向会直接触发浏览器跳转刷新：

<form action="{% url 'action:update_status_outreach' %}" method="POST">
    {% csrf_token %}
    <input type="hidden" name="project_id" value="{{project.id}}">
    <input type="hidden" name="outreach_id" value="{{outreach.id}}">
    <select name="new_status" onchange="if(confirm('确认修改状态吗？')){this.form.submit()}">
        {% for outreach_status in outreach_statuses %}
            {% if outreach_status.0 == outreach.outreach_status %}
                <option value="{{ outreach.outreach_status }}" selected>{{ outreach.outreach_status }}</option>
            {%else%}
                <option value="{{ outreach_status.0}}">{{outreach_status.0}}</option>
            {% endif %}
        {%endfor%}
    </select>
</form>

该方案原有后端视图代码完全不需要改动。

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