django-8渲染json到模板
2016-10-03 本文已影响0人
幽谷听泉
把list或者dict传递给js，处理后展示到页面
- 两种方式
1.页面加载完成后，在页面上操作，在页面上通过 ajax ⽅法得到新的数据并显示在网页上，这种情况适用于动态加载⼀些内容
2.直接在视图函数（views.py中的函数)渲染一个list或者dict和其他网页部分一起显示注意：当直接将list 或者dict传递给js时，网页内容会被转义，得到的格式会报错
#########示例如下：
#views.py
def test(request):
# return render(request,'learn/test.html',{'List':List})
List = ['caideyang','chengcheng','deyang']
return render(request,'learn/test.html',{'List':List})
<!-- test.html -->
<script type="text/javascript">
var List = {{ List }};
alert(List);
</script>
Paste_Image.png
如上图：List列表被转义为['caideyang', 'chengcheng', 'deyang']，控制台有报错
- views.py中返回的函数中的值要⽤json.dumps()处理
- 在⽹⻚上要加⼀个safe 过滤器
示例如下：
#views.py
def test(request):
# return render(request,'learn/test.html',{'List':List})
List = ['caideyang','chengcheng','deyang']
Dict = {'name':'caideyang','age':28,'job':'worker'}
return render(request,'learn/test.html',{'List':json.dumps(List),'Dict':json.dumps(Dict)})
<!-- test.html -->
<script type="text/javascript">
var List = {{ List|safe }};
var Dict = {{ Dict|safe }};
</script>
Paste_Image.png
js处理List和Dict
#test.html
<!DOCTYPE html>
<html>
<head>
<title>django ajax</title>
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div id="list"> 学习 </div>
<div id='dict'></div>
<script type="text/javascript">
//列表
var List = {{ List|safe }};
$('#list').prepend(List[0]);
$('#list').append(List[1]);
console.log('--- 遍历 List 方法 1 ---')
for(i in List){
console.log(i);// i为索引
}
console.log('--- 遍历 List 方法 2 ---')
for (var i = List.length - 1; i >= 0; i--) {
console.log(List[i]);
};
console.log('--- 同时遍历索引和内容---')
$.each(List, function(index, item){
console.log(index);
console.log(item);
});
// 字典
var Dict = {{ Dict|safe }};
console.log("--- 两种字典的取值方式 ---")
console.log(Dict['name']);
console.log(Dict.age);
console.log("--- 遍历字典 ---");
for(i in Dict) {
console.log(i + Dict[i]);//注意，此处 i 为键值
}
</script>
</body>
</html>
Paste_Image.png
