描述一下問題背景：
前臺封裝一個json字串給后臺傳輸資料，后臺的ajax獲取請求之后把接收的資料顯示到前臺html表格上，
jsonify：這個方法可以把字典轉化為json字串
通過jsonify()方法回傳到前臺界面時的相應型別為Content-Type: application/json
通過json.dumps()回傳的相應型別為Content-Type:text/html
json 模塊4個方法：
json.loads() 把 json 字串 轉成 python 資料型別
json.load(python資料型別,檔案句柄) 把 json 檔案 轉成 python 資料型別
json.dumps() 把 python 資料型別 轉成 json 字串
json.dump(檔案句柄) 把 python 資料型別 寫入到 json檔案中
下面兩張圖傳輸完資料之后，后臺ajax使用alert彈出資料結果，顯示都是object
界面顯示是undefined
發送請求的代碼：
1 @app.route('/table')
2 def get_table():
3 res=[]
4 for tup in utils.get_world():
5 res.append({"dt": tup[0], "c_name": tup[1], "confirm":tup[2],
6 "heal": tup[3], "dead": tup[4], "nowConfirm": tup[5]})
7 # print(res)
8 return jsonify({"data": res})
接收請求的代碼：
1 //給表格添加資料
2 function get_table() {
3 $.ajax({
4 async: false,
5 url: "/table",
6 // dataType:"json",
7 success: function (data) {
8 var table_data=https://www.cnblogs.com/rainbow-1/p/data.data;
9 for(var i=0;i<table_data.length;i++){
10 console.log(table_data[i]);
11 }
12 var appendHTML = "";
13 if($(".map-table tbody tr").length>0){
14 $(".map-table tbody tr").remove();
15 }
16 for(var i=0; i<24; i++){
17 appendHTML = "<tr align='center' style='color:aquamarine;' ><td>"+
18 table_data[i].dt+"</td><td>"+
19 table_data[i].c_name+"</td><td>"+
20 table_data[i].confirm+"</td><td>"+
21 table_data[i].heal+"</td><td>"+
22 table_data[i].dead+"</td><td>"+
23 table_data[i].nowConfirm+"</td><td>"+
24 (i+1)+"</td></tr>";
25 $(".map-table tbody").append(appendHTML);
26 }
27 }
28 })
29 }
30 get_table();
31 setInterval(get_table,1000000);
前臺html：
1 <div class="map-table">
2 <table align="center" style="margin:3px" cellspacing="7px">
3 <thead>
4 <tr style="color: #FFB6C1" >
5 <th>時間</th>
6 <th>國家</th>
7 <th>累計確診</th>
8 <th>累計治愈</th>
9 <th>累計死亡</th>
10 <th>現存確診</th>
11 <th>排名</th>
12 </tr>
13 </thead>
14 <tbody>
15 </tbody>
16 </table>
17 <div class="chart"></div>
18 <div class="panelFooter"></div>
19 </div>
20 </div>
這里要解決的問題關鍵就是要知道資料到底傳過來了沒有，而且為什么資料會顯示object
var table_data=https://www.cnblogs.com/rainbow-1/p/data.data;
alert(table_data)
這段代碼運行后就會彈出一堆object，因為js是沒辦法直接列印顯示字典內容的，alert方法是顯示字串的
但是js不支持Python字典直接轉化列印，所以就會把所有字典物件轉化成object顯示，
但是我們也有辦法訪問dict里的資料項：
這是封裝的res資料，里面是list[ ] + 字典
也就是這樣的格式[{ },{ },...]
既然res是list格式的，那我們就可以先通過索引下標的方式訪問到不同的字典資料項，也就是 data[index].key的方式
for(var i=0; i<24; i++){
appendHTML = "<tr align='center' style='color:aquamarine;' ><td>"+
table_data[i].dt+"</td><td>"+
table_data[i].c_name+"</td><td>"+
table_data[i].confirm+"</td><td>"+
table_data[i].heal+"</td><td>"+
table_data[i].dead+"</td><td>"+
table_data[i].nowConfirm+"</td><td>"+
(i+1)+"</td></tr>";
$(".map-table tbody").append(appendHTML);
}
通過輸出console在網頁F12可以看到object的具體內容，如果顯示object說明資料已經傳輸成功了，但是js里不可以
直接轉化輸出這些Python物件的字串形式，訪問的時候也要細心！
下面的圖的object的具體內容：
tomorrow the birds will singing.
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/272431.html
標籤：Python
上一篇：初學JVAVA題目總結