Добрый день,
Я делаю проект на Django. Мне необходимо было сделать выпадающие списки на HTML странице. Значения второго списка зависят от первого. Поэтому мне пришлось использовать Java Script. Мне удалось сделать зависимый выпадающий список и отправить информацию в Django о том какие значения списков выбраны.
На основании этих данных, я сформировал Queryset из базы данных и отправил их назад в Java Script через JSON response. На основании сформированных данных из базы данных, я хочу сформировать таблицу.
Я столкнулся с такой проблемой: Как теперь передать полученные данные из Java Script в HTML
как переменную, чтобы я смог сформировать таблицу используя шаблонизатор? Т.е передать данные так как мы бы их передали, используя функцию render пример:
return render(request, 'oilcons/index.html', context)
Мой js файл, смотри функцию
aircraftForm.addEventListener
success: function(response) {
console.log(response)
tablePrint.innerHTML = response - как передать "response" как переменную в HTML
const aircraftInput = document.getElementById('ac_get')
const engineInput = document.getElementById('select_eng')
const defaultEngine = document.getElementById('default_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')
aircraftInput.addEventListener('change', e=>{
console.log(e.target.value)
const selectedAircraft = e.target.value
engineInput.innerHTML = ""
engineInput.appendChild(defaultEngine)
engineInput.selectedIndex = 0
btnBox.classList.add('button-disable')
$.ajax({
type: 'GET',
url: `models-json/${selectedAircraft}/`,
success: function(response) {
console.log(response)
const enginesData = response.data
enginesData.map(item=>{
const option = document.createElement('option')
option.value = item.Ser_Num
option.label = item.Ser_Num
console.log(item.Ser_Num)
engineInput.appendChild(option)
})
engineInput.addEventListener('change', e=>{
btnBox.classList.remove('button-disable')
})
},
error: function(error){
console.log(error)
}
})
})
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>
View функция:
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})
Буду благодарен за помощь!
Простой
