Django 后臺帶有字典的列表數據與頁面js交互實例

更新時間：2020年04月03日 09:01:48 作者：煢夜

這篇文章主要介紹了Django 后臺帶有字典的列表數據與頁面js交互實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

1、這里只是簡單介紹一下Django的view如何跟js進行交互，首先，進入用戶明細的時候會進入一個頁面，叫用戶信息表，里面包含了用戶學習的課程和所得到的分數，每門課程對應一個分數，其中課程用下拉框依次顯示，選擇課程時動態(tài)顯示課程的分數，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，循環(huán)得到每個用戶信息的詳情，也就是用戶的每個課程對應的每個分數，分別把值添加進字典里面去。

（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中如何處理上面?zhèn)鬟^的detail數據，其中課程用下拉框依次顯示，選擇課程時動態(tài)顯示課程的分數，代碼如下：

 <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）、接著，循環(huán)上面得到的變量，也就是一個帶有字典的列表，循環(huán)就得到每一個帶有課程和課程分數的字典，因為在view底下是把每一個字典轉換為json格式，所以現(xiàn)在必須把循環(huán)得到每一個字典通過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">隊列監(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="設備添加" 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交互實例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: