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. 【原创】go语言学习（四）流程控制

    目录: 1.if else语句块 2.for语句 3.switch语句 if else语句块 1.基本语法 if condition { //do something } if statement; ...

  2. Echart-无需json文件的树状图（源码）超级简单，小白的福音

    源码: <!DOCTYPE html> <head> <meta charset="utf-8"> <script type=" ...

  3. hdu2476(区间dp+dp)

    String painter Time Limit: 5000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) T ...

  4. MyBatis：Error evaluating expression ''''. Return value () was not iterable错误

    Error evaluating expression ''''.  Return value () was not iterable 出现原因:xml文件中遍历List 时,该参数的实际值为非Lis ...

  5. Webpack 核心模块 tapable 解析（转）

        原文出自:https://www.pandashen.com 前言 Webpack 是一个现代 JavaScript 应用程序的静态模块打包器,是对前端项目实现自动化和优化必不可少的工具,We ...

  6. sql data compare

    https://documentation.red-gate.com/sdc14 About SQL Data Compare With SQL Data Compare, you can compa ...

  7. ISO/IEC 9899:2011 条款5——5.1.1 翻译环境

    5.1.1 翻译环境 5.1.1.1程序结构 1.一个C程序不需要一次全被翻译完.程序的文本被保存在本国际标准中被称作为源文件(或预处理文件)的单元里.一个源文件连同所有通过指示符#include所包 ...

  8. 机器学习 - 算法 - SVM 支持向量机

    SVM 原理引入 支持向量机( SVM,Support Vector Machine ) 背景 2012年前较为火热, 但是在12年后被神经网络逼宫, 由于应用场景以及应用算法的不同, SVM还是需要 ...

  9. ubuntu 12.04 nfs-server/client安装配置

    由于opennebula的共享存储的方式需要nfs,为了opennebula 3.8在ubuntu 12.04上搭建做铺垫,先介绍下nfs server和client端的安装和配置.   1. nfs ...

  10. websphere 英文版部署（更新）项目【我】

    websphere 部署(更新)项目 首先在控制台页面依次点左侧,打开应用配置页面: 然后在右侧勾选我们要重新部署的项目,首先点上面的 停止 按钮,等项目停止后,再勾选项目,点上面的  更新 按钮(如 ...