Django中如何将Ajax返回的多表格数据拆分至不同Div？

当前代码情况 #

前端Ajax代码 #

$.ajaxSetup({
    data: {
        txtSearch: $('#txtSearch').val(),
        prefilter: $('#prefilter').val(),
        csrfmiddlewaretoken: '{{ csrf_token }}'
    },
});
$.ajax({
    type: "POST",
    url: "article-filter2/",
    success: function (data) {
        $("#div_tab_search_results_contact").html(data.html_table); // 正常工作
        $("#div_tab_search_results_company").html(data.html_table); // 重复了全部内容，不符合需求
    }
});

Django视图代码 #

def article_filter2(request):
    data = dict()
    [...]
    data['html_table'] = render_to_string('grid.html', {
        'available_lessons': available_lessons,
        'available_lessons_company': available_lessons_company
    }, request=request)
    return JsonResponse(data)

需求 #

data.html_table包含两个独立表格，需按表格ID将第一个表格插入$("#div_tab_search_results_contact")，第二个插入$("#div_tab_search_results_company")。

解决方案 #

方案1：前端直接处理DOM（无需修改后端） #

在Ajax的success回调中，先将返回的HTML字符串存入临时容器，再按表格ID提取对应内容插入目标div：

success: function (data) {
    // 创建临时DOM容器存放返回的HTML
    const tempWrapper = $('<div>').html(data.html_table);
    // 替换成你实际的两个表格ID
    const contactTable = tempWrapper.find('#table-contact');
    const companyTable = tempWrapper.find('#table-company');
    
    // 插入到对应容器
    $("#div_tab_search_results_contact").html(contactTable);
    $("#div_tab_search_results_company").html(companyTable);
}

方案2：后端拆分返回（更清晰易维护） #

修改Django视图，分别返回两个表格的HTML内容，避免前端额外处理：

def article_filter2(request):
    data = dict()
    [...]
    # 拆分渲染两个表格（建议将grid.html拆分为两个独立的表格模板）
    data['contact_table'] = render_to_string('contact_table.html', {
        'available_lessons': available_lessons
    }, request=request)
    data['company_table'] = render_to_string('company_table.html', {
        'available_lessons_company': available_lessons_company
    }, request=request)
    
    return JsonResponse(data)

对应前端Ajax修改：

success: function (data) {
    $("#div_tab_search_results_contact").html(data.contact_table);
    $("#div_tab_search_results_company").html(data.company_table);
}

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