django 中如何将字典变量传给template视图层的JS
时间:2022-07-24
本文章向大家介绍django 中如何将字典变量传给template视图层的JS,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
django中,将view.py中的数据绑定到template中的html 中,我们可以用 render 函数携带 context 参数,复杂的数据结构可以用字典来组织,字典其实就是PHP中的关联数组,java中的map。
目录
1. view.py传递参数
2. create_task.html 中JS解析参数
3. django 其他过滤器
1
view.py传递参数
view.py 中,定义了一个入口,返回某三层目录,first_level 是第一层,是个列表,second_level 是第二层,是个字典,third_level 是第三层,是个字典,要将 second_level,third_level 传递给create_task.html,需要先转化成json 数据,然后放到context 里面。
def new_task(request):
context = {}
#读取 目录层级结构
root_path = 'G:\python\02-dart\dart\'
first_level = get_file_list(root_path)
second_level = {}
for one in first_level:
second_level[one] = get_file_list(root_path+one)
third_level = {}
for k,v in second_level.items():
for sub in v:
third_level[k+sub]=get_file_list(root_path+k+sub)
context['first_level'] = first_level
context['second_level'] = json.dumps(second_level)
context['third_level'] = json.dumps(third_level)
print(second_level)
print('----')
print(third_level)
return render(request, 'create_task.html', context)
2
create_task.html 中JS解析参数
create_task.html 中JS 解析时,{{ second_level|safe }} 一定要加上safe过滤器,要求不对字符进行转义。
<script type="text/javascript">
var second_level = {{ second_level|safe }}
console.log(second_level)
$('#first_level').change(function () {
})
$('#second_level').change(function () {
})
</script>
3
django 其他过滤器
{{ a|safe }} 于django输出前,要求不对字符进行转义。自动转义关闭时自动失效
{{ time|date:'Y-m-d H:i:s' }} 格式化输出时间 年月日时分秒
{{ list|join:',' }} 相当于 ‘,’.join(list)
{{ str|truncatechars:8 }} 显示内容为5个字符与3个点号 共8个字符
{{ str|truncatechars:8 }} 同上 显示单位为单词 按空格辨别
{{ str|length }} str的长度
{{ list|slice:'0-2' }} 切片索引0-2不含2
{{ var|default:'xxx' }} 为var设置默认值为‘xxx’
{{ str|lower }}{{ str|upper }} 输出显示为小/大写
{{ int|filesizeformat }} 转为内存大小单位 类似于2GB 1TB
END
- [技巧]看我如何通过Weeman+Ettercap拿下路由器管理权限
- 一分钟理清Vue-cli 代码构建步骤。
- 点击图片放大至原始图片大小
- 替代jquery1.9版本以前的toggle事件函数(开关)
- 总结CSS3新特性(Animation篇)
- Scrapy爬虫入门
- 移动端页面按手机屏幕分辨率自动缩放的js
- PYTHON黑帽编程 4.1 SNIFFER(嗅探器)之数据捕获--补充
- es 5 数组reduce方法记忆
- CSS3与动画有关的属性transition、animation、transform对比
- 总结CSS3新特性(Transiton篇)
- 【实战】MS14-068域权限提升漏洞总结
- 总结CSS3新特性(Transform篇)
- Python 黑帽编程 4.2 Sniffer之数据本地存储和加载
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法