python例子-Django之传递json到js脚本中。

一、有两种方法传递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

 

posted @ 2015-10-22 23:00  超超xc  Views(2075)  Comments(0Edit  收藏  举报
I suppose,were childrenonec.