当前位置:
首页 > temp > python入门教程 >
-
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.
最新更新
nodejs爬虫
Python正则表达式完全指南
爬取豆瓣Top250图书数据
shp 地图文件批量添加字段
爬虫小试牛刀(爬取学校通知公告)
【python基础】函数-初识函数
【python基础】函数-返回值
HTTP请求:requests模块基础使用必知必会
Python初学者友好丨详解参数传递类型
如何有效管理爬虫流量?
2个场景实例讲解GaussDB(DWS)基表统计信息估
常用的 SQL Server 关键字及其含义
动手分析SQL Server中的事务中使用的锁
openGauss内核分析:SQL by pass & 经典执行
一招教你如何高效批量导入与更新数据
天天写SQL,这些神奇的特性你知道吗?
openGauss内核分析:执行计划生成
[IM002]Navicat ODBC驱动器管理器 未发现数据
初入Sql Server 之 存储过程的简单使用
SQL Server -- 解决存储过程传入参数作为s
关于JS定时器的整理
JS中使用Promise.all控制所有的异步请求都完
js中字符串的方法
import-local执行流程与node模块路径解析流程
检测数据类型的四种方法
js中数组的方法,32种方法
前端操作方法
数据类型
window.localStorage.setItem 和 localStorage.setIte
如何完美解决前端数字计算精度丢失与数