欢迎各位兄弟 发布技术文章
这里的技术是共享的
有时候我们想把一个 list 或者 dict 传递给 javascript,处理后显示到网页上。
这里讲述两种方法:
一,页面加载完成后,在页面上操作,在页面上通过 ajax 方法得到新的数据并显示在网页上,这种情况适用于动态加载一些内容,但是我们不知道用户需要哪个,比如用户输入一个值或者点击某个地方,动态地把内容显示在网页上,详见:Django Ajax
二,直接在视图函数(views.py中的函数)中渲染一个 list 或 dict 和其它的网页部分一起显示到网页上
需要注意的是,我们如果直接这么做,传递到 js 的时候,网页的内容会被转义,得到的格式会报错。
views.py
1 2 3 4 5 6 | from __future__ import unicode_literals from django.shortcuts import render def home(request): List = [ '自强学堂' , '渲染Json到模板' ] return render(request, 'home.html' , { 'List' : List }) |
home.html 中的一部分
1 2 3 4 | < script type = "text/javascript" > var List = {{ List }}; alert(List); </ script > |
访问时会得到 Uncaught SyntaxError: Unexpected token ILLEGAL
需要注意两点:1. views.py中返回的函数中的值要用 json.dumps()处理,2. 在网页上要加一个 safe 过滤器。
views.py
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | # -*- coding: utf-8 -*- from __future__ import unicode_literals import json from django.shortcuts import render def home(request): List = [ '自强学堂' , '渲染Json到模板' ] Dict = { 'site' : '自强学堂' , 'author' : '涂伟忠' } return render(request, 'home.html' , { 'List' : json.dumps( List ), 'Dict' : json.dumps( Dict ) }) |
home.html 只给出了 js 核心部分:
1 2 3 4 | //列表 var List = {{ List|safe }}; //字典 var Dict = {{ Dict|safe }}; |
如果你对 js 比较熟悉,至此为止,下面的不用于看了,如果不太熟悉,可以参考下面的更详细的代码。
html 完全代码及完整代码下载(最后面):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | <!DOCTYPE html> < html > < head > < title >欢迎光临 自强学堂!</ 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的每一部分放到头部和尾部 $('#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可以看到输入的值 console.log(List[i]); }; console.log('--- 同时遍历索引和内容,使用 jQuery.each() 方法 ---') $.each(List, function(index, item){ console.log(index); console.log(item); }); // 字典 var Dict = {{ Dict|safe }}; console.log("--- 两种字典的取值方式 ---") console.log(Dict['site']); console.log(Dict.author); console.log("--- 遍历字典 ---"); for(i in Dict) { console.log(i + Dict[i]);//注意,此处 i 为键值 } </ script > </ body > </ html > |
完整代码下载:zqxt_json.zip (基于Django 1.8,注意settings.py文件和低版本可能不兼容,其它部分相同)
回复 梦回江南曲: 内容是动态出来的,请自己看一下原代码。至于为什么要用到渲染json,一般用来加载一些动态的内容,实现 Python与js之间的传递,等你用到的时候你就知道了。