Django 后臺帶有字典的列表數據與頁面js交互實例
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='http://m.cgvv.com.cn/static/Css/Monitor/addmqmonitor.css' rel='external nofollow' > <link rel='stylesheet' type='text/css' href='http://m.cgvv.com.cn/static/Css/Public/header.css' rel='external nofollow' rel='external nofollow' > <link rel='stylesheet' type='text/css' href='http://m.cgvv.com.cn/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 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='https://rkxy.com.cn/static/Js/jquery-2.2.2.min.js'></script><!-- <script type='text/javascript' src='https://rkxy.com.cn/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='http://m.cgvv.com.cn/static/Css/Equipment/modifyBtn.css' rel='external nofollow' > <link rel='stylesheet' type='text/css' href='http://m.cgvv.com.cn/static/Css/Public/header.css' rel='external nofollow' rel='external nofollow' > <link rel='stylesheet' type='text/css' href='http://m.cgvv.com.cn/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交互實例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持好吧啦網。
相關文章：
網公網安備