描述一下问题背景:
前台封装一个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],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)
这段代码运行后就会弹出一堆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.
原文地址:https://www.cnblogs.com/rainbow-1
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。