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. RS-232串口通信简介

    1969年,美国电子工业协会将RS-232定为串行通信接口的电器标准,该标准定义了数据终端设备DTE(Date Teriminal Equipment)与数据通信设备DCE(Data Communic ...

  2. [NOI2010]超级钢琴 倍增

    [NOI2010]超级钢琴 倍增 题面 暴力:枚举区间丢入堆\(O(n^2logn)\) 正解:考虑每次枚举和弦起点\(s\),那么以\(s\)为起点的和弦为\(sum[t]-sum[s](s+L-1 ...

  3. ubuntu中编译安装gcc 9.2.0

    一切都和其他源码安装软件是一样的: 一.下载源代码: http://ftp.gnu.org/gnu/gcc/gcc-9.2.0/gcc-9.2.0.tar.xz 二.解压文件 tar xvf gcc- ...

  4. 浅谈无旋treap(fhq_treap)

    一.简介 无旋Treap(fhq_treap),是一种不用旋转的treap,其代码复杂度不高,应用范围广(能代替普通treap和splay的所有功能),是一种极其强大的平衡树. 无旋Treap是一个叫 ...

  5. Java核心复习 —— J.U.C 并发工具类

    一.CountDownLatch 文档描述 A synchronization aid that allows one or more threads to wait until* a set of ...

  6. springboot集成Kafka

    kafka和MQ的区别: 1)在架构模型方面, RabbitMQ遵循AMQP协议,RabbitMQ的broker由Exchange,Binding,queue组成,其中exchange和binding ...

  7. DCL：管理用户

    1. 管理用户 (1) 查询用户 MySQL把用户的数据存放在 "mysql" 数据库的 "user" 表中. SELECT * FROM user; (2) ...

  8. arcgis python 布局视图中文本查找替换

    # Author: ESRI # Date: July 5, 2010 # Version: ArcGIS 10.0 # Purpose: This script will perform a sea ...

  9. python -- 安装 django

    django-admin startproject 创建的文件名python3/python manage.py startapp 子项目名称python3/python manage.py runs ...

  10. PyTorch Tutorials 4 训练一个分类器

    %matplotlib inline 训练一个分类器 上一讲中已经看到如何去定义一个神经网络,计算损失值和更新网络的权重. 你现在可能在想下一步. 关于数据? 一般情况下处理图像.文本.音频和视频数据 ...