使用django模板中Javascript變量的值來渲染模板上下文

Question

請不要將此問題標記為無效。 我在 stackoverflow 中沒有發現任何關於下面提到的問題的問題。

我有一個 Django 模板。 我將以下上下文傳遞給它

context = {
'1_title': 'Title 1',
'2_title': 'Title 2',
'3_title': 'Title 3',
'4_title': 'Title 4',
}
return render(request, 'index.html', context)

我有一個 HTML 文件，其中有一個下拉列表。 下拉菜單有 1、2、3、4 之類的值。 我已經向它注冊了一個 onClick 函數。

我需要實現這個功能。 我將在 onClick 函數中獲取值。 然后我將接收到的值與 _title 連接起來，並存儲一個 javascript 變量。 現在我需要使用那個 javascript 變量來引用 django 上下文。 我無法實現這一目標。 我用谷歌搜索並在 stackoverflow 中進行了廣泛的搜索。 似乎沒有人回答我的問題。

javascript 函數如下所示：

function getContextValue(value) {
var key = value + '_title'; 
return {{ key }}
}

如果我在下拉列表中選擇 1，則上述函數的鍵為 1_title。 我需要從標題 1 的上下文中返回 1_title 值。

對我來說它不起作用並且只返回 1_title 。 我什至嘗試過 return {{ 'key' }} 。 在這個它返回鍵。

Stackoverflow 社區請善待。 這對你來說可能是一個簡單的問題，但對我來說卻不是。

Answer 1

如果您想訪問 JS 中的上下文信息，則需要以某種方式將其傳遞給 JS。

將您的上下文更改為類似這樣的內容，以便在模板中更輕松地訪問。

context = {}
context['data_for_select'] = {
'1_title': 'Title 1',
'2_title': 'Title 2',
'3_title': 'Title 3',
'4_title': 'Title 4',
}
return render(request, 'index.html', context)

我假設你在模板中有這樣的東西：

<select name="dropdown">
  {% for key, title in data_for_select.items %}
    <option value="{{key}}">{{title}}</option>
  {% endfor %}
</select>

您現在可以在 DOM 中的某處為您的 JS 方法呈現上下文數據。 Django 提供了一個方便的模板過濾器，名為json_script https://docs.djangoproject.com/en/3.0/ref/templates/builtins/#json-script

{{ data_for_select|json_script:"select-data" }}

您可以在 JS 中使用它，例如：

var data = JSON.parse(document.getElementById('select-data').textContent);

通過這種方式，您已將模板上下文數據公開給 JS。