Как передать переменную из html в javascript
Перейти к содержимому

Как передать переменную из html в javascript

  • автор:

Как передать переменную из Java Script в HTML?

Я делаю проект на 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/$/`, 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:

 
Flight Date Oil quantity, % Oil temperature, % dt, hr Engine FH Oil Consumption, Quarts/hr
Qa Qb Ta Tb QH, raw Average for 10 flights Average for 20 flight Average for 30 flight
> > > > > > > > > > > >
* Oil Consumption limit IAW AMM is 0.25 quart/h
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()

Буду благодарен за помощь!

  • Вопрос задан более года назад
  • 214 просмотров

2 комментария

Средний 2 комментария

Как вывести переменную из js в html

В самом простом случае, сначала необходимо в html документе дать элементу в который будем помещать данные — id или класс. Например:

    Chair The Laid back     Heigth 80 cm  id="testData">    

Затем, ниже объявленного искомого объекта, в теле тега необходимо с помощью JavaScript «получить» объект и занести в свойство textContent необходимые данные.

 type="text/javascript"> const data = 'new_test_data'; document.getElementById("testData").textContent = data;  

Как можно передать значение из html в js?

Всех приветствую!
Создал простое расширение, где пользователь выбирает из поля значение, а это значение должно выбраться на сайте в списке.
60ae4eb05a0ca480839124.png
60ae4ed34a120146680222.png
Но как передать выбранное значение в файле по сути html в исполняемый код файла js?
Прошу прощения за может быть глупый вопрос ( для тех кто знает ), но для меня это пока что темный лес!

  • Вопрос задан более двух лет назад
  • 295 просмотров

Передача переменной из html в javascript

Javascript записанный инлайном вызывает смешанные чувства.

Во первых это почти всегда не по кодстайлу.

Во вторых трудно отлаживать.

В третьих Такой код не кушируется браузером.

Внимание дорогой читатель пример выше неправильный более чем полностью, о чем предупреждаю сразу и это как раз то как делать не нужно, а вот о том как правильно вдумчиво и внимательно можно прочитать ниже.

Но если вы к примеру не человек высоких моральными принципов, можете смело копировать и делать с этим вообще что угодно, я вам этого не советовал и более того даже отговаривал.

Я убежден что javascript должен храниться исключительно в файлах,
html дабы обеспечить нормальное кеширование браузерами, и облегчить поиск этого самого скрипта в своем проекте.

Но как же передать значение из php и при этом сохранить красивый код?

Ответ использовать eval() в Javascript.

Рассмотрим пример с подключенимм google maps.

Для начала подключим google maps (библиотеку)

инициализируем начало отрисовки карт сразу после загрузки DOM

var $ = jQuery.noConflict(); $(document).ready(function () < if ($('#map-canvas').length) < function initialize() < var place = eval($("#map-canvas").attr('data-place')); var pos = new google.maps.LatLng(place[0], place[1]); var mapOptions = < center: pos, zoom: 17, mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControlOptions: < style: google.maps.MapTypeControlStyle.DROPDOWN_MENU >, scrollwheel: false, rotateControl: true >; var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); map.setTilt(45); var marker = new google.maps.Marker(< position: pos, map: map >); > google.maps.event.addDomListener(window, 'load', initialize); > >);

Создадим необходимые элементы html

Объяснение этой уличной магии

в js нас интересует строка :

var place = eval($("#map-canvas").attr('data-place'));
$("#map-canvas").attr('data-place')

Получает атрибут data-place элемента с id map-canvas после чего eval() преобразует строку [61.784625, 34.350755] в js код , конкретней в массив т.к. присутствуют квадратные скобки.

По спецификации HTML5 ,браузеры пропускают атрибуты тегов начинающихся с data- влиять на отрисовку этот атрибут не будет, но его значение можно использовать в javascript.

Код html можно модифицировать:

с использованием php , так простыми средствами можно передавать целые массивы переменных из php в js не используя инлайнового написания : )

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *