Python编程
搜索
分类

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

作者：茕夜 时间：2021-12-01 01:59:39　

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>

来源：https://blog.csdn.net/u012561176/article/details/82491124

标签：Django,字典,列表,数据,js交互
0
投稿

猜你喜欢

  • python 基于Apscheduler实现定时任务

    2022-03-29 00:53:32

  • Django修改app名称和数据表迁移方案实现

    2022-12-14 17:09:11

  • python中的信号通信 blinker的使用小结

    2023-07-31 10:05:10

  • Python3.5.3下配置opencv3.2.0的操作方法

    2021-06-20 19:43:53

  • Python +Selenium解决图片验证码登录或注册问题(推荐)

    2022-12-30 05:41:51

  • js 可选链操作符的使用

    2023-08-18 16:04:57

  • 在sql中返回插入的记录的id

    2008-12-21 15:54:00

  • Python Pygame实现俄罗斯方块

    2023-03-17 07:18:03

  • 深入浅析python3中的unicode和bytes问题

    2022-11-29 02:41:47

  • 在python中利用dict转json按输入顺序输出内容方式

    2021-10-26 15:17:23

  • JS数组方法汇总

    2009-08-03 14:06:00

  • Python开发网站目录扫描器的实现

    2022-07-09 11:51:02

  • oracle数据排序后获取前几行数据的写法(rownum、fetch方式)

    2023-07-02 01:15:09

  • JS实现点击掉落特效

    2023-09-12 12:50:33

  • 如何基于Python Matplotlib实现网格动画

    2023-07-31 04:17:37

  • Python中创建对象列表的实现示例

    2023-08-15 07:20:35

  • SQL Server 2005代理服务应用软件组成

    2009-02-19 17:19:00

  • python处理图片之PIL模块简单使用方法

    2023-06-25 21:42:05

  • Python中利用pyqt5制作指针钟表显示实时时间(指针时钟)

    2023-04-30 22:11:13

  • 订单转化率之回访确认

    2009-08-24 12:40:00
    • asp之家 网络编程 m.aspxhome.com