码迷,mamicode.com
首页 > 编程语言 > 详细

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

时间:2015-10-22 23:58:02      阅读:451      评论:0      收藏:0      [点我收藏+]

标签:

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

 

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

标签:

原文地址:http://www.cnblogs.com/xccnblogs/p/4903111.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!