如何将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文件？

回答

相关问题