一、有两种方法传递sjon到页面中,一种是ajax使用,另一种是直接渲染在页面中:
views.py
#coding:utf-8 from django.shortcuts import render import json # Create your views here. def addjson(request): list_ = ['list集合','渲染Json到模板'] dict_ = {'site':'字典地址','author':'自学者'} return render(request,'addjson.html',{'jsonlist':json.dumps(list_),'Dict':json.dumps(dict_)}) #这里记得使用json.dumps处理,否则会报错.
urls.py
from django.conf.urls import include, url from django.contrib import admin urlpatterns = [ url(r'^.*?json/$','learn.views.addjson',name='addjson'), url(r'^admin/', include(admin.site.urls)), ]
addjson.html
<!DOCTYPE html> <html> <head> <title>欢迎光临 json</title> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <!-- script src="http://code.hs-cn.com/jquery/jquery-1.7.1.min.js"></script --> </head> <body> <div id="list"> 学习 out json:</div> <div id='dict'></div> <script type="text/javascript"> //列表 var List = {{ jsonlist|safe }}; //这里记得使用safe过滤喔,否则会报错. //下面的代码把List的每一部分放到头部和尾部 $('#list').prepend(List[0]); $('#list').append(List[1]); console.log('--- 遍历 List 方法 1 ---'); 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>
启动服务,前台访问http://localhost:8000/json/就可以看见效果了。
2015年10月22日22:59:56