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中 0.1+0.2 ！== 0.3

    1. 存储原理: 在计算机中数字无论是定点数还是浮点数都是以多位二进制的方式进行存储的.事实上不仅仅是 Javascript,在很多语言中 0.1 + 0.2 都会得到 0.3000000000000 ...

  2. Cogs 12. 运输问题2(有上下界的有源汇最大流)

    运输问题2 ★★☆ 输入文件:maxflowb.in 输出文件:maxflowb.out 简单对比 时间限制:1 s 内存限制:128 MB 运输问题 [问题描述] 一个工厂每天生产若干商品,需运输到 ...

  3. 数据结构实验之图论二：图的深度遍历（SDUT 2107）（简单DFS）

    题解:图的深度遍历就是顺着一个最初的结点开始,把与它相邻的结点都找到,也就是一直往下搜索直到尽头,然后在顺次找其他的结点. #include <bits/stdc++.h> using n ...

  4. Unrecognized syntax identifier "proto3". This parser only recognizes "proto2". ”问题解决方法

    编译cartographer时遇到Unrecognized syntax identifier “proto3”. This parser only recognizes “proto2”.排查:使用 ...

  5. [提权]Windows COM组件提权漏洞 (CVE-2017-0213)

    0x01 简介 COM组件是微软开发的一种新软件开发技术,在这个COM框架的下,可以开发出多功能的组件,可以根据自己的需求进行定制开发,替换旧的组件,多个功能组件组合到一起,从而形成了一个复杂的定制化 ...

  6. CF1188B Count Pairs

    [题目描述] 给定一个质数 \(p\) , 一个长度为 \(n\)n 的序列 \(a = \{ a_1,a_2,\cdots,a_n\}\)一个整数 \(k\). 求所有数对 \((i, j)\) ( ...

  7. GitLab安装及备份迁移数据

    centos7安装GitLab 下载相应版本rpm包 https://mirrors.tuna.tsinghua.edu.cn/gitlab-ce/yum/el7/ 我此处下载9.3.6版本. # w ...

  8. Restful API 架构与设计参考原则

    1. 什么是RESTREST全称是Representational State Transfer,中文意思是表述(编者注:通常译为表征)性状态转移. 它首次出现在2000年Roy Fielding的博 ...

  9. windows2012域控

    此次主要是使用服务器搭建域控制器,我主要是用于使用office web apps 和office online server搭建在线Word预览编辑! 一.准备工作 首先准备1台比较干净的服务器,推荐 ...

  10. 机器学习 - 算法 - 聚类算法 K-MEANS / DBSCAN算法

    聚类算法 概述 无监督问题 手中无标签 聚类 将相似的东西分到一组 难点 如何 评估, 如何 调参 基本概念 要得到的簇的个数  - 需要指定 K 值 质心 - 均值, 即向量各维度取平均 距离的度量 ...