如何将变量从 javascript 发送到 html？

Question

我想用数据库中的数据填充表格。我正在使用 Django 开发我的项目。然而， 所需数据基于选择元素（依赖选择），这就是我使用 JavaScript 从数据库获取数据的原因。 我能够使用 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)
        }
    })
})

现在，我想将数据从 JSON 响应传输到 HTML 作为变量“表”。我怎样才能做到这一点？ 我不想使用 JavaScript 填充表格，而是想使用模板引擎。

<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>

这是我的视图函数，其中来自数据库的数据被发送到 JSON 响应

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})