【已解决】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

 

 

 发送请求的代码：

@app.route('/table')
def get_table():
    res=[]
    for tup in utils.get_world():
        res.append({"dt": tup[0], "c_name": tup[1], "confirm":tup[2],
                    "heal": tup[3], "dead": tup[4], "nowConfirm": tup[5]})
    # print(res)
    return jsonify({"data": res})

接收请求的代码：

//给表格添加数据
function get_table() {
    $.ajax({
        async: false,
        url: "/table",
        // dataType:"json",
        success: function (data) {
            var table_data=data.data;
            for(var i=0;i<table_data.length;i++){
                console.log(table_data[i]);
            }
            var appendHTML = "";
        if($(".map-table tbody tr").length>0){
            $(".map-table tbody tr").remove();
        }
        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);
            }
        }
    })
}
get_table();
setInterval(get_table,1000000);

前台html：

<div class="map-table">
                <table align="center" style="margin:3px"  cellspacing="7px">
                <thead>
              <tr style="color: #FFB6C1" >
                <th>时间</th>
                <th>国家</th>
                <th>累计确诊</th>
                <th>累计治愈</th>
                <th>累计死亡</th>
                <th>现存确诊</th>
                <th>排名</th>
              </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
                <div class="chart"></div>
                <div class="panelFooter"></div>
                </div>
            </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.