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'] = data2、接下來看下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')" % (app,flag)
cursor.execute(sql)
conn.commit()
a = cursor.execute("select name,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互動例項就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。