AJAX POST提交后Django模板未正常渲染的解决方案

• 前端AJAX的成功回调仅打印了日志，没有将后端返回的渲染结果插入到当前页面DOM中，返回内容被直接丢弃，自然不会有页面更新。
• 后端POST请求直接返回完整页面模板，包含搜索框、页面框架等大量非结果区域的冗余代码，不适合做局部更新。
• 未配置CSRF令牌，Django默认会拦截不带合法CSRF令牌的POST请求，未配置时会直接返回403错误。

全程不需要手动拼接DOM元素，所有列表渲染逻辑完全由Django模板实现，前端只负责完成HTML片段的插入。

1. 拆分模板片段 #

将搜索结果的渲染逻辑单独抽离为独立模板片段，避免每次请求返回完整页面冗余内容。
新建templates/search/includes/result_list.html，内容为原有的结果遍历逻辑：

{% if hits %}
    <div class="container">
    {% for hit in hits %}
        <div>
            <a href="">{{ hit.title }}</a>
        </div>
        <div>
            <p>{{ hit.abstract }}</p>
        </div>
    {% endfor %}
    </div>
{% endif %}

修改原主模板templates/search/index.html，预留搜索结果容器，引入上述片段：

<!-- 原有搜索框、搜索按钮、页面公共结构保留不变 -->
<div id="search-result-container">
    {% include "search/includes/result_list.html" %}
</div>

2. 调整后端视图逻辑 #

GET请求返回完整页面，POST请求仅渲染结果片段返回：

from django.template.loader import render_to_string
from django.http import HttpResponse

def search_view(request):
    if request.method == "POST":
        query = request.POST.get("query", "")
        hits = search(query)
        # 仅渲染结果片段，返回生成好的HTML字符串
        result_html = render_to_string(
            "search/includes/result_list.html",
            {"hits": hits},
            request=request
        )
        return HttpResponse(result_html)
    # GET请求正常返回完整页面
    return render(request, "search/index.html")

如果不想拆分模板，也可以在POST请求时仍返回完整页面，前端提取对应容器内容插入即可，但该方案会传输冗余内容，不推荐使用。

3. 修改前端AJAX逻辑 #

补充CSRF令牌配置，在回调中直接将后端返回的HTML片段插入到结果容器中：

// 读取Cookie中存储的CSRF令牌
function getCookie(name) {
    let cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        const cookies = document.cookie.split(';');
        for (let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].trim();
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}
const csrftoken = getCookie('csrftoken');

// 全局配置jQuery POST请求自动携带CSRF请求头
$.ajaxSetup({
    beforeSend: function(xhr, settings) {
        if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type) && !this.crossDomain) {
            xhr.setRequestHeader("X-CSRFToken", csrftoken);
        }
    }
});

$("#search-button").click(function(){
    $.post(
        "{% url 'search-index' %}",
        {
            query: $("#query").val()
        },
        function(data){
            // 直接将后端渲染好的HTML替换到结果容器中，无需手动拼接DOM
            $("#search-result-container").html(data);
        }
    )
})

内容的提问来源于stack exchange，提问作者namespace-Pt