Django 后台带有字典的列表数据与页面js交互实例


Posted in Python onApril 03, 2020

1、这里只是简单介绍一下Django的view如何跟js进行交互,首先,进入用户明细的时候会进入一个页面,叫用户信息表,里面包含了用户学习的课程和所得到的分数,每门课程对应一个分数,其中课程用下拉框依次显示,选择课程时动态显示课程的分数,django view部分代码如下:

def user_info(request, userid):
 if request.method == "GET":
  user = User.objects.get(userid=userid)
  user_info = UserInfo.objects.get(userid=userid)
  content = {"user": user, "user_info": user_info}
  detail_data = {}
  data = []
  for detail in user_info:
   detail_data['course'] = detail.course
   detail_data['score'] = str(detail.score)
   data.append(json.dumps(detail_data, ensure_ascii=False))
  content['detail'] = data
  return render(request, "user/user_info/user_info.html", content)

其中,需注意的是下面这段代码,

(1)、定义一个空的字典为detail_data,接着再定义一个空的列表data,循环得到每个用户信息的详情,也就是用户的每个课程对应的每个分数,分别把值添加进字典里面去。

(2)、后面在把字典的值通过json.dumps转换为json格式,这样才能给html页面的js进行交互,而且如果有中文的话,需要在后面加个ensure_ascii=False参数,不然的话js得到的数据不是我们想得到的数据。

(3)、最后,再把转成json的字典数据添加进列表data中,最后通过content['detail']=data把这个列表传到页面上,供js调用。

detail_data = {}
  data = []
  for detail in user_info:
   detail_data['course'] = detail.course
   detail_data['score'] = str(detail.score)
   data.append(json.dumps(detail_data, ensure_ascii=False))
  content['detail'] = data

2、接下来看下html中如何处理上面传过的detail数据,其中课程用下拉框依次显示,选择课程时动态显示课程的分数,代码如下:

<script>
  function select() {
   var course =$('#course option:selected').val();
   var details = {{ detail|safe }}
   for(var detail in details){
    var data = JSON.parse(details[detail]);
    if(course == data.course){
     $('#score').html(data.score);
    }
   }
  }
 </script>

代码解析一下:

(1)、其中获取下拉框选择的课程值,赋给一个变量course,接着把传过来界面的detail,赋给一个变量details,注意这里必须要用{{ detail|safe }},不然取出来的数据会不是想要的。

(2)、接着,循环上面得到的变量,也就是一个带有字典的列表,循环就得到每一个带有课程和课程分数的字典,因为在view底下是把每一个字典转换为json格式,所以现在必须把循环得到每一个字典通过json解析得到其对应的,通过JSON.parse(details[detail]),否则也是取不到对应的数据。

(3)、通过页面下拉框选择的课程值,跟取到的每个课程的分数做比较,相等的话,就取出对应课程的分数,填充进页面中。

3、Django和js交互的网上例子太少,这里积累一下,以上内容仅供学习参考,谢谢!主要还是自己去尝试。

补充知识:django 后台数据直接交给页面

<html>
<head>
 <title>运维平台</title>
 <link rel="stylesheet" type="text/css" href="/static/Css/Monitor/addmqmonitor.css" rel="external nofollow" >
 <link rel="stylesheet" type="text/css" href="/static/Css/Public/header.css" rel="external nofollow" rel="external nofollow" >
 <link rel="stylesheet" type="text/css" href="/static/Css/Public/menu.css" rel="external nofollow" rel="external nofollow" >
</head>
<body>
 <include file="Public:header"/>
 <div class="content">
  <include file="Public:menu"/>
  <div class="con fl">
   <form id="condition" action="/addmqmonitor/" method="post">
    
    <label class="condition">应用</label><input type="text" name="app" class="equipment_sz">
    <label class="condition">队列管理器</label><input type="text" name="qmgr" class="equipment_sz">
    <label class="condition">通道名称</label><input type="text" name="channel" class="equipment_sz">
        <br />
    <label class="condition">IPADDR</label><input type="text" name="ipaddr" class="equipment_sz">
    <label class="condition">PORT</label><input type="text" name="port" class="equipment_sz">
    <label class="condition">队列监控阈值</label><input type="text" name="depth" class="equipment_sz">
    <label class="condition">是否监控</label><input type="text" name="flag" class="equipment_sz">
        <br />
    <input type="submit" value="设备添加" class="equipment_add_btn">
   </form>
  </div>
 </div>
</body>
<script type="text/javascript" src="/static/Js/jquery-2.2.2.min.js"></script>
<!-- <script type="text/javascript" src="/static/Js/Equipment/addEquipment.js"></script> -->
</html>
 
 
def addmqmonitor(req):
 print req.get_full_path()
 app= req.POST['app']
 qmgr= req.POST['qmgr']
 channel= req.POST['channel']
 ipaddr= req.POST['ipaddr']
 port= req.POST['port']
 depth= req.POST['depth']
 flag= req.POST['flag']
 conn= MySQLdb.connect(
  host='127.0.0.1',
  port = 3306,
  user='root',
  passwd='1234567',
  db ='DEVOPS',
  charset="UTF8"
  )
 cursor = conn.cursor()
 sql = "insert into mon_mq(name,qmgr,channel,ipaddr,port,depth,flag) values('%s','%s','%s','%s','%s','%s','%s')" % (app,qmgr,channel,ipaddr,port,depth,flag)
 cursor.execute(sql)
 conn.commit()
 a = cursor.execute("select name,qmgr,channel,ipaddr,port,flag from mon_mq" )
 info = cursor.fetchall()
 print info
 print type(info)
 return render(req,'listmqinfo.html',{'info':info})
 
 
[root@yyjk templates]#cat listmqinfo.html 
<html> 
<head> 
 <title>运维平台</title> 
 <link rel="stylesheet" type="text/css" href="/static/Css/Equipment/modifyBtn.css" rel="external nofollow" > 
 <link rel="stylesheet" type="text/css" href="/static/Css/Public/header.css" rel="external nofollow" rel="external nofollow" > 
 <link rel="stylesheet" type="text/css" href="/static/Css/Public/menu.css" rel="external nofollow" rel="external nofollow" > 
</head> 
<table border="10">
{% for x in info %} 
<tr>
<th>{{x.0}}</th>
<th>{{x.1}}</th>
<td>{{x.2}}</td>
<td>{{x.3}}</td>
<td>{{x.4}}</td>
<td>{{x.5}}</td>
</tr>
{% endfor %} 
</table>

以上这篇Django 后台带有字典的列表数据与页面js交互实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Python 相关文章推荐
python连接mysql数据库示例(做增删改操作)
Dec 31 Python
探寻python多线程ctrl+c退出问题解决方案
Oct 23 Python
Python 列表排序方法reverse、sort、sorted详解
Jan 22 Python
Python标准库之collections包的使用教程
Apr 27 Python
零基础使用Python读写处理Excel表格的方法
May 02 Python
pyqt5 使用label控件实时显示时间的实例
Jun 14 Python
python实现列表中最大最小值输出的示例
Jul 09 Python
Python2和3字符编码的区别知识点整理
Aug 08 Python
python 两个数据库postgresql对比
Oct 21 Python
nginx+uwsgi+django环境搭建的方法步骤
Nov 25 Python
keras-siamese用自己的数据集实现详解
Jun 10 Python
利用python进行文件操作
Dec 04 Python
Django import export实现数据库导入导出方式
Apr 03 #Python
Django用户身份验证完成示例代码
Apr 03 #Python
基于Python共轭梯度法与最速下降法之间的对比
Apr 02 #Python
python 的topk算法实例
Apr 02 #Python
python torch.utils.data.DataLoader使用方法
Apr 02 #Python
Python基于stuck实现scoket文件传输
Apr 02 #Python
Python要求O(n)复杂度求无序列表中第K的大元素实例
Apr 02 #Python
You might like
PHP编实现程动态图像的创建代码
2008/09/28 PHP
PHP限制页面只能在微信自带浏览器访问的代码
2014/01/15 PHP
PHP 面向对象程序设计(oop)学习笔记(三) - 单例模式和工厂模式
2014/06/12 PHP
Joomla语言翻译类Jtext用法分析
2016/05/05 PHP
yum命令安装php7和相关扩展
2016/07/04 PHP
TP(thinkPHP)框架多层控制器和多级控制器的使用示例
2018/06/13 PHP
PHP封装的分页类与简单用法示例
2019/02/25 PHP
Laravel 修改默认日志文件名称和位置的例子
2019/10/17 PHP
纯js简单日历实现代码
2013/10/05 Javascript
浅谈jQuery异步对象(XMLHttpRequest)
2014/11/17 Javascript
JS实现DIV容器赋值的方法
2015/12/14 Javascript
BootStrap响应式导航条实例介绍
2016/05/06 Javascript
基于JS实现无缝滚动思路及代码分享
2016/06/07 Javascript
jQuery Checkbox 全选 反选的简单实例
2016/11/29 Javascript
JS实现类似百叶窗下拉菜单效果
2016/12/30 Javascript
JS字符串false转boolean的方法(推荐)
2017/03/08 Javascript
移动端网页开发调试神器Eruda的介绍与使用技巧
2017/10/30 Javascript
react.js组件实现拖拽复制和可排序的示例代码
2018/08/20 Javascript
webpack4打包vue前端多页面项目
2018/09/17 Javascript
vue实现的下拉框功能示例
2019/01/29 Javascript
Koa 中的错误处理解析
2019/04/09 Javascript
详解Vue路由自动注入实践
2019/04/17 Javascript
JS实现音乐导航特效
2020/01/06 Javascript
python 读写中文json的实例详解
2017/10/29 Python
对python指数、幂数拟合curve_fit详解
2018/12/29 Python
解决新版Pycharm中Matplotlib图像不在弹出独立的显示窗口问题
2019/01/15 Python
python pandas cumsum求累计次数的用法
2019/07/29 Python
Python栈的实现方法示例【列表、单链表】
2020/02/22 Python
python环境下安装opencv库的方法
2020/03/05 Python
Django restful framework生成API文档过程详解
2020/11/12 Python
函授毕业生自我鉴定
2013/11/06 职场文书
电台编导求职信
2014/05/06 职场文书
市场营销专业应届生自荐信
2014/06/19 职场文书
学生无故旷课检讨书
2014/09/20 职场文书
如何使用vue3打造一个物料库
2021/05/08 Vue.js
sentinel支持的redis高可用集群配置详解
2022/04/01 Redis