把list或者dict傳遞給js，處理后展示到頁面
- 兩種方式
1.頁面加載完成后伊者，在頁面上操作，在頁面上通過 ajax ?法得到新的數(shù)據(jù)并顯示在網(wǎng)頁上，這種情況適用于動態(tài)加載?些內(nèi)容
2.直接在視圖函數(shù)（views.py中的函數(shù))渲染一個list或者dict和其他網(wǎng)頁部分一起顯示注意：當直接將list 或者dict傳遞給js時箕慧，網(wǎng)頁內(nèi)容會被轉(zhuǎn)義，得到的格式會報錯
#########示例如下：
#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列表被轉(zhuǎn)義為['caideyang', 'chengcheng', 'deyang']茴恰，控制臺有報錯
- views.py中返回的函數(shù)中的值要?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('--- 同時遍歷索引和內(nèi)容---')
$.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
