ajax和flask路由传json格式数据出现undefined和object错误

概述描述一下问题背景： 前台封装一个json字符串给后台传输数据，后台的ajax获取请求之后把接收的数据显示到前台html表格上。 jsonify：这个方法可以把字典转化为json字符串 通过jsonif 描述一下问题背景：

前台封装一个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使用alertd出数据结果，显示都是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],1)">confirm":tup[2],6                     heal": tup[3],1)">dead": tup[4],1)">NowConfirm": tup[5]})7     # print(res)8     return Jsonify({data": res})

接收请求的代码：

 1 //给表格添加数据 2 function get_table() { 3     $.AJAX({ 4         async: false,1)"> 5         url: "/table" 6          dataType:"Json", 7         success:  (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>014             $(".map-table tbody tr").remove();15         }16         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：

<div class="map-table"> 2                 table align="center" style="margin:3px"  cellspacing="7px" 3                 thead 4               tr style="color: #FFB6C1"  5                 th>时间</ 6                 >国家 7                 >累计确诊 8                 >累计治愈 9                 >累计死亡10                 >现存确诊11                 >排名12               tr13                 14                 tbody15                 16             table17                 ="chart"></div18                 ="panelFooter"19                 20             >

 

　这里要解决的问题关键就是要知道数据到底传过来了没有，而且为什么数据会显示object

var table_data=data.data;
alert(table_data)
这段代码运行后就会d出一堆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.

总结

以上是内存溢出为你收集整理的ajax和flask路由传json格式数据出现undefined和object错误全部内容，希望文章能够帮你解决ajax和flask路由传json格式数据出现undefined和object错误所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。