Django传递数据给JS

2023-03-26 14:45| 来源: 网络整理| 查看: 265

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 ：代码如下：下新建一个

var List = {{ List|safe }};//列表 var Dict = {{ Dict|safe }};//字典

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下的下建立

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

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=(‘,’, ‘:’)是否写正确。

【本文地址】

公司简介

联系我们