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 布尔操作实现代码
Mar 23 Python
python中将字典形式的数据循环插入Excel
Jan 16 Python
详解Python计算机视觉 图像扭曲(仿射扭曲)
Mar 27 Python
python opencv 图像拼接的实现方法
Jun 27 Python
Python爬虫抓取技术的一些经验
Jul 12 Python
Python进程间通信 multiProcessing Queue队列实现详解
Sep 23 Python
Python pygame绘制文字制作滚动文字过程解析
Dec 12 Python
python读取当前目录下的CSV文件数据
Mar 11 Python
python argparse模块通过后台传递参数实例
Apr 20 Python
安装多个版本的TensorFlow的方法步骤
Apr 21 Python
Django haystack实现全文搜索代码示例
Nov 28 Python
Python机器学习之基于Pytorch实现猫狗分类
Jun 08 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教程 基本语法
2009/10/23 PHP
ThinkPHP跳转页success及error模板实例教程
2014/07/17 PHP
浅析PHP编程中10个最常见的错误
2014/08/08 PHP
php连接oracle数据库的方法(测试成功)
2016/05/26 PHP
Laravel框架分页实现方法分析
2018/06/12 PHP
javascript倒计时功能实现代码
2012/06/07 Javascript
JS代码判断IE6,IE7,IE8,IE9的函数代码
2013/08/02 Javascript
JS实现文字放大效果的方法
2015/03/03 Javascript
Javascript实现计算个人所得税
2015/05/10 Javascript
ECHO.js 纯javascript轻量级延迟加载的实例代码
2016/05/24 Javascript
Vue.js如何实现路由懒加载浅析
2017/08/14 Javascript
vue环境搭建简单教程
2017/11/07 Javascript
20行JS代码实现粘贴板复制功能
2018/02/06 Javascript
JavaScript 中定义函数用 var foo = function () {} 和 function foo()区别介绍
2018/03/01 Javascript
微信小程序提取公用函数到util.js及使用方法示例
2019/01/10 Javascript
JS检索下拉列表框中被选项目的索引号(selectedIndex)
2019/12/17 Javascript
[03:44]2015国际邀请赛选手档案—Cloud9.NoTail
2015/07/28 DOTA
python实现的简单文本类游戏实例
2015/04/28 Python
利用Python实现Windows定时关机功能
2017/03/21 Python
python分割列表(list)的方法示例
2017/05/07 Python
浅谈Python使用Bottle来提供一个简单的web服务
2017/12/27 Python
Python实现k-means算法
2018/02/23 Python
小白入门篇使用Python搭建点击率预估模型
2018/10/12 Python
如何在django里上传csv文件并进行入库处理的方法
2019/01/02 Python
用python做游戏的细节详解
2019/06/25 Python
Django实现WebSSH操作物理机或虚拟机的方法
2019/11/06 Python
python3 xpath和requests应用详解
2020/03/06 Python
全面解析CSS Media媒体查询使用操作(推荐)
2017/08/15 HTML / CSS
中国最大的名表商城:万表网
2016/08/29 全球购物
毕业生求职简历的自我评价
2013/10/23 职场文书
商务日语专业毕业生求职信
2013/10/26 职场文书
学术会议主持词
2014/03/17 职场文书
财政专业大学生职业生涯规划书
2014/09/17 职场文书
2014年学生党支部工作总结
2014/12/20 职场文书
孔繁森观后感
2015/06/10 职场文书
立秋之描写立秋的作文(五年级)
2019/08/08 职场文书