文档章节

django页面中javascript解析python字典

好铁
 好铁
发布于 2017/07/26 20:38
字数 219
阅读 54
收藏 0

python的字典通过模板传入之后,不能整个作为参数被javascript的函数使用,因为python2 的整数后有个L,字符串前有个u。

解决方法是使用自定义的django模板过滤器。

步骤:

1. 定义过滤器

在django注册过的某个app下, 建立templatetags目录,此目录应和models, views, templates 等同级。此目录下新建custom_filter.py, 内容如下:

 from django.template import Library
    from django.utils.safestring import SafeString
    import json

    register = Library()


    @register.filter("escapedict")
    def escapedict(data):
        if not isinstance(data, dict):
            return data
        for key in data:
            if isinstance(data[key], int) and not isinstance(data[key], bool):
                data[key] = int(SafeString(data[key]))
            else:
                data[key] = SafeString(data[key])
        return json.dumps(data)

 

然后在页面中这样使用:


加载过滤器
<html>
{% load custom_filter %}
...
...
</html>

 

js函数的调用:
onclick="jsfunc('{{data|escapedict}}')" 


js函数的定义
function showdetails(data){
   此处的data就是json格式的
}

 

 

 

ref

© 著作权归作者所有

好铁
粉丝 38
博文 266
码字总数 78672
作品 0
朝阳
程序员
私信 提问
15款Django开发常用软件包

是一款高级的Python Web框架,可以帮助开发者快速创建web应用。我们这里整理了15款Django开发中常用的软件包,学会使用它们可以节省大量开发时间,提高开发效率。同时,也给出了它们的pip安装...

xiaoge2016
2018/04/20
0
0
利用Ajax提升网页渲染速度——以Highcharts为例

先来看看速度优化对比 Django响应请求 在Django的视图模块中, 响应ajax请求, 处理完毕后发送回前端 参考资料 关于HighCharts的Ajax例子可以参考官方文档 点击查看 菜鸟教程 点击查看 还在修改...

謝增光_Feson
2018/05/24
0
0
在django项目中加入像bootstrap这样的css,js等静态文件

在django中,urls.py将URL请求转给view.py中的函数,函数将计算后的结果转给templates中的某个xxx.html文件,最后xxx.html文件发给了客户,在客户的页面显示出来,这里,我总结下我怎么在htm...

我的去哈哈
2014/02/16
0
1
FastPy3.0 发布,高性能 python 协程web框架

FastPy3.0 发布了,FastPy是python领域一个高性能的web框架,底层封装gevent协程模型,使得python原生库操作mysql或者http时自动变成异步模式,使用上又具有django、webpy的易用性特点。 本次...

feimat
2016/03/09
2.1K
8
AJAX和from-上传文件示例【django项目】

项目简述 本Django项目为测试实例项目,用于学习测试。 分别用三种Django文件上传方式(form方式、jQuery+jQuery.ajax方式、原生JS+原生ajax方式)做上传功能示例 文件 文件释义 form_upload....

ZHAO_JH
2018/12/05
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Android双向绑定原理简述

Android双向绑定原理简述 双向绑定涉及两个部分,即将业务状态的变化传递给UI,以及将用户输入信息传递给业务模型。 首先我们来看业务状态是如何传递给UI的。开启dataBinding后,编译器为布局...

tommwq
今天
2
0
Spring系列教程八: Spring实现事务的两种方式

一、 Spring事务概念: 事务是一系列的动作,它们综合在一起才是一个完整的工作单元,这些动作必须全部完成,如果有一个失败的话,那么事务就会回滚到最开始的状态,仿佛什么都没发生过一样。...

我叫小糖主
今天
6
0
CentOS 的基本使用

1. 使用 sudo 命令, 可以以 root 身份执行命令, 必须要在 /etc/sudoers 中定义普通用户 2. 设置 阿里云 yum 镜像, 参考 https://opsx.alibaba.com/mirror # 备份mv /etc/yum.repos.d/CentO...

北漂的我
昨天
3
0
Proxmox VE技巧 移除PVE “没有有效订阅” 的弹窗提示

登陆的时候提示没有有效的订阅You do not have a valid subscription for this server. Please visit www.proxmox.com to get a list of available options. 用的是免费版的,所以每次都提示......

以谁为师
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部