如何將Django數據傳遞給外部JS文件？

我正在研究一個Django項目。我想從Django的views.py中將數據傳遞給JavaScript文件，運行js函數，然後將返回值呈現到我的html頁面中。我沒有在這個項目中使用表格。有人能指導我如何處理這個問題嗎？我在這裏看到的大多數答案都是過時的，我嘗試過不同的方法，但沒有運氣。我正在使用Python v2.7。先謝謝你！如何將Django數據傳遞給外部JS文件？

來源

2017-08-16 Marvin

如果您的項目使用Jinja或其他模板引擎，您可以嘗試將數據傳遞到模板中。

在Writing your first Django app, part 3找到了這一點，並調整了一下。

def index(request): 
    template = loader.get_template('app/index.html') 
    my_data = ['whatever your data is'] 
    context = { 
     'my_data': my_data, 
    } 
    return HttpResponse(template.render(context, request))

而且index.html中

<html> 
    <head> 
     // import jQuery 
    </head> 
    <body> 
     <div id='my_data_label'></div> 
     <script type="text/javascript"> 
      var my_data = "{{ my_data }}"; // gets set by jinja 
      $('.my_data_label').text(my_data); 
      // do whatever with the data 
     </script> 
    </body> 
</html>

不知道這是你在尋找什麼，但希望它幫助。

來源

2017-08-16 20:44:28 DoctorAgon

OMG謝謝！我忘了將「my_data」傳遞給上下文。你知道我可以將「my_data」傳遞給.js文件嗎？另外，如果我要走這條路線，如果我通過多個變量，會不會是一個問題？再次感謝！ :) – Marvin

看到我的評論以上使用外部JavaScript文件（擾流：這很容易）的變量。對於您使用的對象數量當然沒有限制。 –

這可能是一個好主意，直接呈現頁面模板上的<script>標記內的JavaScript數據。如果要在多個頁面中使用它，請確保將其包含在基本模板中或使用include將其導入。

你的看法可能類似於一個標準的Django視圖：

def detail(request, poll_id): 
    try: 
     p = Poll.objects.get(pk=poll_id) 
    except Poll.DoesNotExist: 
     raise Http404("Poll does not exist") 
    return render(request, 'polls/detail.html', {'poll': p})

模板將有一些額外的邏輯來構建JavaScript對象：

<script> 
var questionset = { 
    {% for q in poll.question_set %} 
     q.id : { 
      "title": "{{ q.title }}", 
      "score": {{ q.score }} 
     } 
     {% if not loop.last %},{% endif %} 
    {% endfor %} 
} 
</script>

現在，您在您的處置中有一個JavaScript對象該模板從數據動態構建而成。你可以使用它，請你：

<script> 
    function doSomething(questionset){ 
     ... 
    } 
</script>

有一些方法可以將數據保存到一個javascript文件，但請記住，這得到由客戶端的瀏覽器緩存。這不是一個好主意，有動態數據。

來源

2017-08-16 20:47:58

我的django技能有點生疏，所以請在使用前仔細檢查我的代碼。任何更正都表示讚賞。 –

嗨，羅伊！謝謝你的評論。我會玩這個代碼，並更新你，如果有什麼:) – Marvin

羅伊，我避免在我的html文件中添加如何將變量「a」傳遞給外部.js文件？ – Marvin

如何將Django數據傳遞給外部JS文件？

回答

相關問題