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里对应的方法，数据传输。

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

1. 先看项目需求，原本的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=(‘,’, ‘:’)是否写正确。