Django与JS交互的示例代码

Django 前后台的数据传递

https://www.cnblogs.com/xibuhaohao/p/10192052.html

应用一：有时候我们想把一个 list 或者 dict 传递给 javascript，处理后显示到网页上，比如要用 js 进行可视化的数据。
请注意：如果是不处理，直接显示在网页上，用Django模板就可以了。

这里讲述两种方法：

一，页面加载完成后，在页面上操作，在页面上通过 ajax 方法得到新的数据（再向服务器发送一次请求）并显示在网页上，这种情况适用于页面不刷新的情况下，动态加载一些内容。比如用户输入一个值或者点击某个地方，动态地把相应内容显示在网页上。

二，直接在视图函数（views.py中的函数）中渲染一个 list 或 dict 的内容，和网页其它部分一起显示到网页上（一次性地渲染，还是同一次请求）。

需要注意两点：1、views.py中返回的函数中的值要用 json.dumps()处理   2、在网页上要加一个 safe 过滤器

view.py

# -*- coding: utf- -*- 

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

<!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[]);

 $('#list').append(List[]); 

 console.log('--- 遍历 List 方法 1 ---')

 for(i in List){

  console.log(i);// i为索引

 } 

 console.log('--- 遍历 List 方法 2 ---')

 for (var i = List.length - ; i >= ; 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>

应用二：不刷新网页的情况下，加载一些内容

应用三：传递数字或者字典到网页，由JS处理，再显示出来

更多内容参考： https://www.jb51.net/article/121885.htm

Django与JS交互的示例代码-django js 获取 python 字典-Django 前后台的数据传递的更多相关文章

  1. Django 前后台的数据传递示列

    Django 前后台的数据传递的方法 Django 从后台往前台传递数据时有多种方法可以实现. 最简单的后台是这样的: ? 1 2 3 4 from django.shortcuts import r ...

  2. JavaScript动态加载资源【js|css】示例代码

    在开发过程中会用到各种第三方的插件,或者自己写在单独文件中的js方法库或者css样式,在html头部总是需要写一大堆的script和link标签,如果想要自己实现动态的引入资源文件,可以使用开源的re ...

  3. Django 前后台的数据传递

    Django 从后台往前台传递数据时有多种方法可以实现. 最简单的后台是这样的: from django.shortcuts import render def main_page(request): ...

  4. WKWebView与JS交互，UIWebView+JavascriptCore和JS交互

    最近一直在做有关Swift和JavaScript交互的程序,所以有关UIWebView和WKWebView在使用上的差别在此总结下: UIWebView: (1)创建 var webView: UIW ...

  5. js javascript 容错处理代码屏蔽js错误

    加入到head <SCRIPT language=javascript> window.onerror=function(){return true;} </SCRIPT> o ...

  6. 【python】django上传文件

    参考:https://blog.csdn.net/zahuopuboss/article/details/54891917 参考:https://blog.csdn.net/zzg_550413470 ...

  7. OC与JS交互之UIWebView

    随着H5的强大,hybrid app已经成为当前互联网的大方向,单纯的native app和web app在某些方面显得就很劣势.关于H5的发展史,这里有一篇文章推荐给大家,今天我们来学习最基础的基于 ...

  8. webview与js交互

     对于android初学者应该都了解webView这个组件.之前我也是对其进行了一些简单的了解,但是在一个项目中不得不用webview的时候,发现了webview的强大之处,今天就分享一下使用we ...

  9. webview与js交互（转）

    原文:http://www.cnblogs.com/vanezkw/archive/2012/07/02/2572799.html 对于android初学者应该都了解webView这个组件.之前我也是 ...

随机推荐

  1. js判断当前时区【TimeZone】是否是夏令时

    var d1 = new Date(2009, 0, 1); var d2 = new Date(2009, 6, 1); if (d1.getTimezoneOffset() != d2.getTi ...

  2. leetcode解题报告（17）：Missing Number

    描述 Given an array containing n distinct numbers taken from 0, 1, 2, ..., n, find the one that is mis ...

  3. luogu 1593

    $Answer = A ^ B $ 的因子之和 将 $A$ 进行质因数分解$A = p_1 ^ {a_1} P_2 ^ {a_2} p_3 ^ {a_3} \cdots p_k ^ {a_k}$ $A ...

  4. tornado解析post数据的问题

    解析tornado查询参数: self.request.query_arguments self.get_query_argument[s](参数名称) 解析tornado的post参数: self. ...

  5. 数据结构实验之二叉树一：树的同构 （SDUT 3340）

    题解:把原本结构体的左右子树的类型定义成 int 型,用来存放这个结点的左右子树的编号,分别建造两棵二叉树,按个比较,如果在第二棵树中没有找到,那么就不用在判断了. #include <bits ...

  6. Pycharm使用常见问题

    Pycharm下载 下载链接:https://www.jetbrains.com/pycharm/download/ 分为专业版和社区版,社区版也能满足学习需求 Pycharm专业版激活 使用前请将& ...

  7. FOI冬令营 Day4

    目录 T1.循环流(flow) 传送门 Code T2.整除分块(mex) 传送门 Code T3.森林(forest) 传送门 Code 咕咕咕 T1.循环流(flow) 传送门 Code /* 特 ...

  8. Linux 系统监控shell脚本

    比较粗略的一个脚本:主要监控系统磁盘.CPU.内存.网络流量.tcp连接数等 代码如下: [root@test system_monitor_shell_script]# cat system_mon ...

  9. Centos7 node npm升级版本

    安装npm 官网:https://nodejs.org/en/download/ 下载LTS Linux Binaries (x64)版本. # tar xf node-v10.16.3-linux- ...

  10. spring boot + vue 前后分离实现登录功能（二）

    安装 axios 进行路由转发 npm install axios --save-dev 或者 cnpm install axios --save-dev 修改 Main.js 新增 var axio ...