Django传递数据给JS

Django 数据json格式传输js

把一个 list 或者 dict 传递给 js文件，处理后显示到网页上，

直接在视图函数（views.py中的函数）中渲染一个 list 或 dict 的内容，和网页其它部分一起显示到网页上，一次请求一次传输。

views.py中返回的函数中的值要用 json.dumps(xx)处理，参数xx需要字典或者列表。

在网页上要加一个 safe 过滤器。

一 、大致的流程

1.第一步，在view.py渲染

views.py
# -*- coding: utf-8 -*-
from __future__ import unicode_literals
import json
from django.shortcuts import render
def home(request):
List = ['列表1', '列表2']
Dict = {'键1': '值1', '键2': '值2'}
return render(request, 'home.html', {
'List': json.dumps(List),
'Dict': json.dumps(Dict)
})

2.第二步，对应需要跳转的网页home.html ：

代码如下：

下新建一个

<script type="text/javascript">
var List = {{ List|safe }};//列表
var Dict = {{ Dict|safe }};//字典
</script>

ps: 注意分号不要漏了，需要模板语言两个大括号{{ }};

3.第三步，在urls配置文件 urls.py，添加一个网址来对应我们刚才在views.py下新建的视图函数。因为只有在调用上面的home方法时，才会有生成列表或字典，并返回（即只有调用才会执行return语句）

url'^网址'，home,name='XXX'，

4.第四步，打开django服务器就可以在网页上看到你传过去的数据了，因为开服务器的时候就通过urls来调用views里对应的方法，数据传输。

二 、 举个具体的例子（想传输一个列表）

先看项目需求，原本的js文件是这样的，

在原本的js文件里是这样传数据的：部分代码如下，这是一个并状图的数据传输代码

代码如下：

var series= [{  //这一块是需要传输的数据，即一个大列表
type: 'pie',
name: '占比',
data: [
['悲伤',45.0],//数据来源于后台
['愤怒',26.8],
['焦虑',12.7],
['同情',8.5],
['喜欢',5.3],
['厌恶',5.3],
['愉快',2.1],
['怨恨',1.7]
]
}];

var json = {};
json.chart = chart;
json.title = title;
json.tooltip = tooltip;
json.series = series;    //这个语句就是接收数据，对应上面的series
json.plotOptions = plotOptions;
$('#oPie1').highcharts(json);
});

我们要做的就是怎样把这个需要传输的series不要放在js里，而是把它放在views里面动态地传输过来？？

1.第一步，把上面的需要传输的series注释掉，把它写到views下的一个方法

代码如下：在views.py

def pie_json(request):
pie_series1 = {  # 用字典的形式,为什么原来的js里面是列表，而这里却是用字典？？看下去就知道啦！！
'type': 'pie',
'name': '占比',
'data': [
['厌恶', 4],
['同情', 5],
['喜欢', 2],
['怨恨', 4],
['悲伤', 5],
['愉快', 4],
['愤怒', 7],
['焦虑', 9]
]
}

json_data = json.dumps(pie_series1, separators=(',', ':'))  # 字典通过json打包传输,separators=(',', ':')分隔，：，得到更加紧凑的输出，即是压缩作用

return render(request, 'index.html', {   # 这里会指定到inddex.html下,把data1传输过去，对应变量名为series
'series': json_data})

2.第二步：传到对应的html.在对应的index.html下的下建立

<script type="text/javascript">
var data = [{{ series|safe }}];
{# 传输过来的series通过过滤器safe传输过来了，但不要忘了series是字典形式，所以要和原来的js文件一致需要列表，那就加上[]就行啦~~ #}
</script>

3.第三步，js接受html的数据，还记得js里那句接受数据的语句吗？ 把变量名改成html里的变量名就ok啦~

var json = {};
json.chart = chart;
json.title = title;
json.tooltip = tooltip;
json.series = data;    //这个语句就是接收数据，对应html的data
json.plotOptions = plotOptions;
$('#oPie1').highcharts(json);

4.写好了对应关系，那就最后一步需要调用view下的那个方法，就可以一路传输下来了~怎么调用呢？？

在ulrs.py下写上对应的方法就行啦

url(r'^index', pie_json, name='index')

5.打开服务器，浏览器上运行网页就可以传输过去了

可能出现的问题：

网页无法显示数据，可能是urls.py没有调用到对应方法，数据没有传输成功，也可能是没有打开服务器，变量名对应是否写正确，原js文件需要传输的格式是字典还是列表，过滤器safe是否有写，separators=(‘,’, ‘:’)是否写正确。