django-8渲染json到模板

把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