后台-插件-广告管理-内容页广告位一(手机)

您现在的位置是:首页 > 编程语言 > pythonpython

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

2021-04-18 18:39:32python人已围观

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

描述一下问题背景:

前台封装一个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的具体内容:


Tomorrowthe birds will sing.




文章来源:查看

Tags:路由   错误   格式   数据   flask

很赞哦! ()

后台-插件-广告管理-内容页广告位二(手机)

相关文章

后台-插件-广告管理-内容页广告位三(手机)
后台-插件-广告管理-内容页广告位四(手机)

文章评论

留言与评论(共有 0 条评论)
   
验证码:

本栏推荐

站点信息

  • 文章统计13614篇文章
  • 浏览统计468次浏览
  • 评论统计1个评论
  • 标签管理标签云
  • 统计数据:统计代码
  • 微信公众号:扫描二维码,关注我们