我有一個 Javascript 檔案，它啟用動態下拉選單（即從一個下拉選單中進行選擇會影響其他）。我想將此檔案與多個表單結合使用，但我已將此檔案中的起始變數硬編碼為 html 元素“inverter_oem”和“inverter_model_name”。
在其他形式中，我將需要參考不同的物件。
我怎樣才能做到這一點？我想以這種方式在 Javascript 中創建變數：
const selecting_dropdown_menu = document.getElementById(variable1_from_flask);
const filtered_dropdown_menu = document.getElementById(variable2_from_flask);
我目前的方法是嘗試使用 render_template 從 Flask 路由傳遞變數。（我也嘗試過其他堆疊溢位解決方案，但沒有運氣）
@db_queries.route('/db_query_dynamic_form/<form_name>', methods=['GET', 'POST'])
def db_query_dynamic_form(form_name):
# use methods to get form and endpoint for outside loop
if request.method == 'POST':
# inside loop when form complete
return render_template('list.html', result=query_results["filtered_tables"], columns=query_results["column_names"])
# added variable to pass to jinja template
return render_template(form_endpoint["endpoint"], form=form_endpoint["form"], var="value1")
jinja模板表格如下
% extends "base.html" %}
{% block title %}Inverter Dynamic Search{% endblock %}
{% block heading %}Inverter Dynamic Search{% endblock %}
{% block content %}
<form method="POST">
{{ form.hidden_tag()}}
{{ form.inverter_oem.label }}{{ form.inverter_oem }}<br>
{{ form.inverter_model_name.label }}{{ form.inverter_model_name }}<br>
{{form.submit()}}
{{test}}
</form>
<script>
myVar = {{ var }}
</script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="{{ url_for('static', filename='search_inverter_dynamic.js') }}"></script>
{% endblock %}
但是，當我嘗試時，我沒有在 javascript 檔案中獲得值
console.log(myVar);
這是帶有“硬編碼”變數的原始 JScode
//acquire inverter_oem value from form
const inverter_oem_select = document.getElementById('inverter_oem');
const inverter_model_name_select = document.getElementById('inverter_model_name');
//add event listener to capture selected oem in dropdown
inverter_oem_select.addEventListener('click', (e) => {
let oem = '../modelNameByOEM//' e.target.value;
console.log(oem);
getIt(oem);
});
//recover a JSON containing the list of models from a specific oem
async function getIt(input) {
try {
const res = await axios.get(input);
console.log(res.data);
optionHTML = '';
for (let modelName of res.data.modelNameOem) {
//console.log(res.modelName.name);
optionHTML = '<option value="' modelName.name '">' modelName.name '</option>';
//console.log(optionHTML);
}
inverter_model_name_select.innerHTML = optionHTML;
} catch (err) {
console.log('Could not reach endpoint modelNameByOEM')
console.log(err);
};
}
uj5u.com熱心網友回復：
Jinja 不知道您要在 JavaScript 環境中傳遞變數，因此它無法自動在字串變數周圍添加引號。它只是替換{{ var }}為value1導致語法錯誤。加引號就可以myVar在JS環境里面訪問了：
<script>
myVar = "{{ var }}"
</script>
注意：如果您想傳遞更復雜的資料結構和/或用戶提交的值，您應該查看安全呈現資料的tojson過濾器。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/397300.html
標籤：javascript Python 烧瓶 jinja2