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. C++构造函数的default和delete

    C++11中,当类中含有不能默认初始化的成员变量时,可以禁止默认构造函数的生成, myClass()=delete;//表示删除默认构造函数 myClass()=default;//表示默认存在构造函 ...

  2. 重建道路 树形DP

    重建道路 树形DP 给一棵树,问最少断多少边使得这棵树树最终只有\(p​\)个节点 设计dp状态\(f[u][i][j]\)表示节点\(u\),到第\(i\)个儿子,使\(j\)个节点分离,但是不分离 ...

  3. linux系列（四）：mkdir命令

    1.命令格式: mkdir [选项] 目录名 2.命令功能: 通过 mkdir 命令可以实现在指定位置创建以 DirName(指定的文件名)命名的文件夹或目录.要创建文件夹或目录的用户必须对所创建的文 ...

  4. 认识WebStorm-小程序框架wepy

    WebStorm是一个功能强大的IDE,适用于JavaScript开发,适合使用Node.js进行复杂的客户端开发和服务器端开发. WebStorm具有对JavaScript,HTML, CSS及其现 ...

  5. spring + spring mvc 使用 maven 编译出现异常

    异常如下: [INFO] Scanning for projects...[INFO] [INFO] ------------------------------------------------- ...

  6. Linux 如何通过某一台服务器调用执行多台远程服务器上的脚本，结果显示在本地？

    现在都流行自动化运维了,可能目前技术不够,很多自动化工具还不怎么会用,所以本次只是通过ssh来实现功能. 说明:自己写的一个简单脚本,只是实现了基础功能,还有待优化. 一共三台机器: master:1 ...

  7. NOIP1999提高组 题解报告

    T1 导弹拦截 题目大意:依次有\(n\) (\(n \le 10^5\))枚导弹,一套导弹拦截系统只能拦截一系列高度递减的导弹(一套系统拦截的弹道不一定相邻).求一套系统最多能拦截多少导弹,以及最少 ...

  8. 调整 全局jvm 大小 tomcat 调整jvm大小

    z最近公司换了一个线上的windows服务器,原来的内存48g,现在2g.项目启动报内存不足.又重新安装jre 安装jre 教程链接:(谢谢各位博友) https://www.genban.org/t ...

  9. Jenkins中插件下载失败的解决办法

    插件下载失败原因:通过国外服务器下载镜像,有较高的失败率,某些插件下载失败或者中断会引起其他有依赖关系的插件也下载失败 解决方案:1. 使用VPN.2. Jenkins镜像地址改为国内镜像地址:系统管 ...

  10. nrm切换npm包源

    nrm可以随时切换npm包的源 npm install -g nrm 安装nrm完成 查看nrm源 nrm ls 切换源 npm use npm #也可以切换成其他源