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交互实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持呐喊教程。
本文向大家介绍Django与JS交互的示例代码,包括了Django与JS交互的示例代码的使用技巧和注意事项,需要的朋友参考一下 应用一:有时候我们想把一个 list 或者 dict 传递给 javascript,处理后显示到网页上,比如要用 js 进行可视化的数据。 请注意:如果是不处理,直接显示在网页上,用Django模板就可以了。 这里讲述两种方法: 一,页面加载完成后,在页面上操作,在页面上
本文向大家介绍Java后台与微信小程序的数据交互实现,包括了Java后台与微信小程序的数据交互实现的使用技巧和注意事项,需要的朋友参考一下 想把自己写的一个小项目转成微信小程序,主要是因为小程序比较火,而且自己想学一下小程序的东西,所以抱着初学者的心态开始了这个痛苦的旅程。看过小程序的一点视频,个人感觉和HTML,css,js差不多,甚至比前端更简单一些,可能是微信小程序做不出来那些炫酷的动态效果
本文向大家介绍js+springMVC 提交数组数据到后台的实例,包括了js+springMVC 提交数组数据到后台的实例的使用技巧和注意事项,需要的朋友参考一下 1.ajax 代码 2.后台接收 以上这篇js+springMVC 提交数组数据到后台的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持呐喊教程。
本文向大家介绍python使用flask与js进行前后台交互的例子,包括了python使用flask与js进行前后台交互的例子的使用技巧和注意事项,需要的朋友参考一下 flask与js进行前后台交互代码如下,后台给前端发数据: python部分: js部分: 以上这篇python使用flask与js进行前后台交互的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持呐喊教程
问题内容: 我有一个很大的文件(大约有200k输入)。输入形式为: 我正在读取此文件并将其存储在列表中,如下所示: 每当看到新行时,都会拆分文件。因此,文本如下所示: 我现在必须将这些值存储在字典中,其中键值是每个列表的第一个元素。即键将是A,B,C,D。我发现很难输入值作为列表的其余元素。即字典应该看起来像: 我已经完成以下工作: 请帮助我如何将值添加到字典中。如果列表中没有任何元素(除了将作为
本文向大家介绍JS 封装父页面子页面交互接口的实例代码,包括了JS 封装父页面子页面交互接口的实例代码的使用技巧和注意事项,需要的朋友参考一下 定义标准接口 总结 以上所述是小编给大家介绍的JS 封装父页面子页面交互接口的实例代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!
WeX5的前端是由若干个页面构成的,运行时,页面间有以下几种关系:Shell打开页面、页面与对话框的交互、页面与内嵌页面的交互。 Shell打开页面 WeX5中,Shell负责管理所有的页面;在同一时刻,允许多个页面同时运行,有且只有一个活动页面(即当前页面)。 配合 参考案例 :/UI2/demo/page/index.w 1、打开页面 打开页面时,可以调用以下api: justep.Shell
本文向大家介绍Python 字典与字符串的互转实例,包括了Python 字典与字符串的互转实例的使用技巧和注意事项,需要的朋友参考一下 字典转换为字符串 输出结果为: <class 'str'> --------------------------------------------------------------- 字符串转换为字典 输出结果为: <class 'dict'> 以上这篇Pyt