Django项目：如何将AJAX数据以模板变量传递到HTML？

问题背景 #

在Django开发项目中，需要根据联动选择框的参数从数据库获取数据填充表格。目前已通过JavaScript的AJAX获取到JSON格式数据，但不想用JavaScript填充表格，希望将数据作为名为table的变量传递到HTML，使用Django模板引擎渲染表格。

原JavaScript代码 #

const engineInput = document.getElementById('select_eng')
const btnBox = document.getElementById('btn-submit')
const aircraftForm = document.getElementById('ac-eng-form')
const csrf = document.getElementsByName('csrfmiddlewaretoken')
const flighInput = document.getElementById('flights')
const tablePrint = document.getElementById('table_with_data')


aircraftForm.addEventListener('submit', e=>{
    e.preventDefault()
    console.log('submittted')
    
    $.ajax({
        type: 'POST',
        url: '/show-data/',
        data: {
            'csrfmiddlewaretoken': csrf[0].value,
            'engine': engineInput.value,
            'flights': flighInput.value,
        },
        
        success: function(response) {
            console.log(response)
            tablePrint.innerHTML = response
        },
        error: function(error){
            console.log(error)
        }
    })
})

原HTML表格模板 #

<table>
    <thead>
    <tr>
        <th rowspan="2">Flight</th>
        <th rowspan="2">Date</th>
        <th colspan="2">Oil quantity, %</th>
        <th colspan="2">Oil temperature, %</th>
        <th rowspan="2">dt, hr</th>
        <th rowspan="2">Engine FH</th>
        <th colspan="4">Oil Consumption, Quarts/hr</th>
    </tr>
    <tr>
        <th>Qa</th>
        <th>Qb</th>
        <th>Ta</th>
        <th>Tb</th>
        <th>QH, raw</th>
        <th>Average for 10 flights</th>
        <th>Average for 20 flight</th>
        <th>Average for 30 flight</th>
    </tr>
    </thead>
    <tbody id="table_with_data">
    {% for row in table %}
    <tr>
        <td>{{row.Flight_Num}}</td>
        <td>{{row.Flight_Date}}</td>
        <td>{{row.Oil_Quantity_Departure}}</td>
        <td>{{row.Oil_Quantity_Arrival}}</td>
        <td>{{row.Oil_Temperature_Departure}}</td>
        <td>{{row.Oil_Temperature_Arrival}}</td>
        <td>{{row.Flight_Time}}</td>
        <td>{{row.Engine_TSN}}</td>
        <td>{{row.Oil_Cons_Current_Flight}}</td>
        <td>{{row.Oil_Cons_10_Flights}}</td>
        <td>{{row.Oil_Cons_20_Flights}}</td>
        <td>{{row.Oil_Cons_30_Flights}}</td>
    </tr>
    {% endfor %}
    </tbody>
    <tfoot>
    <tr>
        <td colspan="12">* Oil Consumption limit IAW AMM is 0.25 quart/h</td>
    </tr>
    </tfoot>
</table>

原视图函数 #

def get_eng_sn(request):
    if is_ajax(request=request):
        engine = request.POST.get('engine')
        flight = int(request.POST.get('flights'))
        data_to_table = Engine.objects.filter(Ser_Num=engine).order_by('-id')[:flight].values()
        return JsonResponse(list(data_to_table), safe=False)
    return JsonResponse({'result': False})

解决步骤 #

感谢@Waldemar Podsiadło的建议！具体解决方法如下：

1. 修改视图函数 #

将原本返回JSON的逻辑改为渲染模板，把查询到的数据放入context中传递给模板：

def get_eng_sn(request):
    if is_ajax(request=request):
        engine = request.POST.get('engine')
        flight = int(request.POST.get('flights'))
        data_to_table = Engine.objects.filter(Ser_Num=engine).order_by('-id')[:flight].values() 
        context = {
            'table': data_to_table,
        }
        return render(request, 'oilcons/table.html', context)

2. 修改主HTML文件 #

保留表格的表头和表尾，清空<tbody>内容，等待AJAX返回渲染好的表格行填充：

<table>
    <thead>
    <tr>
        <th rowspan="2">Flight</th>
        <th rowspan="2">Date</th>
        <th colspan="2">Oil quantity, %</th>
        <th colspan="2">Oil temperature, %</th>
        <th rowspan="2">dt, hr</th>
        <th rowspan="2">Engine FH</th>
        <th colspan="4">Oil Consumption, Quarts/hr</th>
    </tr>
    <tr>
        <th>Qa</th>
        <th>Qb</th>
        <th>Ta</th>
        <th>Tb</th>
        <th>QH, raw</th>
        <th>Average for 10 flights</th>
        <th>Average for 20 flight</th>
        <th>Average for 30 flight</th>
    </tr>
    </thead>
    <tbody id="table_with_data">

    </tbody>
    <tfoot>
    <tr>
        <td colspan="12">* Oil Consumption limit IAW AMM is 0.25 quart/h</td>
    </tr>
    </tfoot>
</table>

3. 创建独立的HTML表格模板 #

新建oilcons/table.html模板，仅包含表格的<tbody>及数据行的渲染逻辑，通过Django模板标签遍历table变量生成内容：

{% block table %}
    <tbody id="table_with_data">
        {% for row in table %}
        <tr>
            <td>{{row.Flight_Num}}</td>
            <td>{{row.Flight_Date}}</td>
            <td>{{row.Oil_Quantity_Departure}}</td>
            <td>{{row.Oil_Quantity_Arrival}}</td>
            <td>{{row.Oil_Temperature_Departure}}</td>
            <td>{{row.Oil_Temperature_Arrival}}</td>
            <td>{{row.Flight_Time}}</td>
            <td>{{row.Engine_TSN}}</td>
            <td>{{row.Oil_Cons_Current_Flight}}</td>
            <td>{{row.Oil_Cons_10_Flights}}</td>
            <td>{{row.Oil_Cons_20_Flights}}</td>
            <td>{{row.Oil_Cons_30_Flights}}</td>
        </tr>
        {% endfor %}
    </tbody>
{% endblock %}

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