【已解決】ajax和flask路由傳json格式資料出現undefined和object錯誤

描述一下問題背景：

前台封裝一個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=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=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 sing.