zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    解决Centos7下中文显示乱码
    Pycharm2019.2.1永久激活
    window 共享打印机
    看着前车轮胎能出库
    计算之道 (置换的玩笑)搜索
    GIS+=地理信息+云计算技术——私有云架构设计(2)网络资源规划
    串的模式匹配
    1.Linux下libevent和memcached安装
    STL--H
    【数据结构与算法】(二) c 语言链表的简单操作
  • 原文地址:https://www.cnblogs.com/xccnblogs/p/4903111.html
Copyright © 2011-2022 走看看