如何訪問傳遞給 js 中的 html 的 html 變量？

Question

我有一個變量“設備”，我通過將它傳遞給 views.py 來在 html 頁面中使用它：

def viewsFunction(request):
    devices = getDevices(request)
    return render(request, 'l2l3vpn/l3vpn.html', {'devices': devices})

我想訪問設備列表以在 JS 文件中使用，例如：

autocomplete(document.getElementById("myInput"), devices);

那么如何在js文件中獲取設備列表呢？

Answer 1

假設devices是 JSON 可序列化的，您可以將其轉換為 json，然后在模板 js 代碼中解析

就像是

import json

def viewsFunction(request):
    devices = getDevices(request)
    return render(request, 'l2l3vpn/l3vpn.html', {'devices': devices, 'devicesJSON': json.dumps(devices) })

在模板中你應該有類似的東西

<script>
  const devices= JSON.parse('{{devicesJSON}}')
</script>

如果之后包含您的腳本，那么您就可以在 js 中使用設備 js var

或者您可以簡單地將 if 放入隱藏輸入並從那里解析它

<input type="hidden" value={{devicesJSON}} id="myInput" />

這樣你應該可以使用它

const devices = JSON.parse(document.getElementById("myInput").getAttribute('value'))