Django 后臺(tái)帶有字典的列表數(shù)據(jù)與頁面js交互實(shí)例
1、這里只是簡(jiǎn)單介紹一下Django的view如何跟js進(jìn)行交互,首先,進(jìn)入用戶明細(xì)的時(shí)候會(huì)進(jìn)入一個(gè)頁面,叫用戶信息表,里面包含了用戶學(xué)習(xí)的課程和所得到的分?jǐn)?shù),每門課程對(duì)應(yīng)一個(gè)分?jǐn)?shù),其中課程用下拉框依次顯示,選擇課程時(shí)動(dòng)態(tài)顯示課程的分?jǐn)?shù),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)、定義一個(gè)空的字典為detail_data,接著再定義一個(gè)空的列表data,循環(huán)得到每個(gè)用戶信息的詳情,也就是用戶的每個(gè)課程對(duì)應(yīng)的每個(gè)分?jǐn)?shù),分別把值添加進(jìn)字典里面去。
(2)、后面在把字典的值通過json.dumps轉(zhuǎn)換為json格式,這樣才能給html頁面的js進(jìn)行交互,而且如果有中文的話,需要在后面加個(gè)ensure_ascii=False參數(shù),不然的話js得到的數(shù)據(jù)不是我們想得到的數(shù)據(jù)。
(3)、最后,再把轉(zhuǎn)成json的字典數(shù)據(jù)添加進(jìn)列表data中,最后通過content['detail']=data把這個(gè)列表傳到頁面上,供js調(diào)用。
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中如何處理上面?zhèn)鬟^的detail數(shù)據(jù),其中課程用下拉框依次顯示,選擇課程時(shí)動(dòng)態(tài)顯示課程的分?jǐn)?shù),代碼如下:
<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)、其中獲取下拉框選擇的課程值,賦給一個(gè)變量course,接著把傳過來界面的detail,賦給一個(gè)變量details,注意這里必須要用{{ detail|safe }},不然取出來的數(shù)據(jù)會(huì)不是想要的。
(2)、接著,循環(huán)上面得到的變量,也就是一個(gè)帶有字典的列表,循環(huán)就得到每一個(gè)帶有課程和課程分?jǐn)?shù)的字典,因?yàn)樵趘iew底下是把每一個(gè)字典轉(zhuǎn)換為json格式,所以現(xiàn)在必須把循環(huán)得到每一個(gè)字典通過json解析得到其對(duì)應(yīng)的,通過JSON.parse(details[detail]),否則也是取不到對(duì)應(yīng)的數(shù)據(jù)。
(3)、通過頁面下拉框選擇的課程值,跟取到的每個(gè)課程的分?jǐn)?shù)做比較,相等的話,就取出對(duì)應(yīng)課程的分?jǐn)?shù),填充進(jìn)頁面中。
3、Django和js交互的網(wǎng)上例子太少,這里積累一下,以上內(nèi)容僅供學(xué)習(xí)參考,謝謝!主要還是自己去嘗試。
補(bǔ)充知識(shí):django 后臺(tái)數(shù)據(jù)直接交給頁面
<html> <head> <title>運(yùn)維平臺(tái)</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">應(yīng)用</label><input type="text" name="app" class="equipment_sz"> <label class="condition">隊(duì)列管理器</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">隊(duì)列監(jiān)控閾值</label><input type="text" name="depth" class="equipment_sz"> <label class="condition">是否監(jiān)控</label><input type="text" name="flag" class="equipment_sz"> <br /> <input type="submit" value="設(shè)備添加" 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>運(yùn)維平臺(tái)</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 后臺(tái)帶有字典的列表數(shù)據(jù)與頁面js交互實(shí)例就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- js、jquery實(shí)現(xiàn)列表模糊搜索功能過程解析
- js實(shí)現(xiàn)提交前對(duì)列表數(shù)據(jù)的增刪改查
- js實(shí)現(xiàn)列表向上無限滾動(dòng)
- JS檢索下拉列表框中被選項(xiàng)目的索引號(hào)(selectedIndex)
- Vue.js 無限滾動(dòng)列表性能優(yōu)化方案
- vue.js基于v-for實(shí)現(xiàn)批量渲染 Json數(shù)組對(duì)象列表數(shù)據(jù)示例
- 原生JS實(shí)現(xiàn)列表內(nèi)容自動(dòng)向上滾動(dòng)效果
- 基于JavaScript實(shí)現(xiàn)控制下拉列表
相關(guān)文章
Python中三元運(yùn)算符的簡(jiǎn)潔性及多用途實(shí)例探究
這篇文章主要為大家介紹了Python中三元運(yùn)算符的簡(jiǎn)潔性及多用途實(shí)例探究,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2024-01-01pytorch 6 batch_train 批訓(xùn)練操作
這篇文章主要介紹了pytorch 6 batch_train 批訓(xùn)練操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2021-05-05OpenCV圖像識(shí)別之相機(jī)校準(zhǔn)Camera?Calibration學(xué)習(xí)
這篇文章主要為大家介紹了OpenCV圖像識(shí)別之相機(jī)校準(zhǔn)Camera?Calibration學(xué)習(xí),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-05-05python和websocket構(gòu)建實(shí)時(shí)日志跟蹤器的步驟
這篇文章主要介紹了python和websocket構(gòu)建實(shí)時(shí)日志跟蹤器的步驟,幫助大家更好的理解和學(xué)習(xí)使用python,感興趣的朋友可以了解下2021-04-04python上傳時(shí)包含boundary時(shí)的解決方法
這篇文章主要介紹了python上傳時(shí)包含boundary時(shí)的解決方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-04-04python讀取tif圖片時(shí)保留其16bit的編碼格式實(shí)例
今天小編就為大家分享一篇python讀取tif圖片時(shí)保留其16bit的編碼格式實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-01-01pytorch 如何使用batch訓(xùn)練lstm網(wǎng)絡(luò)
這篇文章主要介紹了pytorch 如何使用batch訓(xùn)練lstm網(wǎng)絡(luò)的操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2021-05-05python項(xiàng)目中requirements.txt的用法實(shí)例教程
Python項(xiàng)目中必須包含一個(gè)requirements.txt文件,用于記錄所有依賴包及其精確的版本號(hào),以便新環(huán)境部署,下面這篇文章主要給大家介紹了關(guān)于python項(xiàng)目中requirements.txt用法的相關(guān)資料,需要的朋友可以參考下2022-06-06