描述一下问题背景:

前台封装一个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.

 


【已解决】ajax和flask路由传json格式数据出现undefined和object错误的更多相关文章

  1. ajax请求后台,返回json格式数据,模板!

    添加一个用户的时候,需要找出公司下所有的部门,和相应部门下的角色,利用ajax请求,实现联动技术.将返回的json格式数据,添加到select标签下. <script type="te ...

  2. 在thinkphp5.0中调用ajax时, 返回的JSON 格式数据在html前台不能用时

    在thinkphp5.0中调用ajax时,如果控制器返回的数据为json格式,视图层接收到返回值即为json格式的数据,此时应该把 JSON 文本转换为 JavaScript 对象,方便调用.具体代码 ...

  3. Flask接口返回JSON格式数据自动解析

    一 自定义一个response类 from flask import Response, jsonify # 定义response返回类,自动解析json class JSONResponse(Res ...

  4. Django学习——ajax发送其他请求、上传文件(ajax和form两种方式)、ajax上传json格式、 Django内置序列化(了解)、分页器的使用

    1 ajax发送其他请求 1 写在form表单 submit和button会触发提交 <form action=""> </form> 注释 2 使用inp ...

  5. (24)ajax上传json格式的数据

    urs.py from django.conf.urls import urlfrom django.contrib import adminfrom app01 import viewsurlpat ...

  6. 导入数据任务(id:373985)异常, 错误信息:解析导入文件错误,请检查导入文件内容,仅支持导入json格式数据及excel文件

    小程序导入,别人导出的数据库json文件,错误信息如下: 导入数据库失败, Error: Poll error, 导入数据任务(id:373985)异常,错误信息:解析导入文件错误,请检查导入文件内容 ...

  7. ajax往后台传json格式数据报415错误

    问题描述: ajax往后台传json格式数据报415错误,如下图所示 页面代码 function saveUser(){ var uuId = document.getElementById(&quo ...

  8. from表单前后端数据编码格式-Ajax发送json格式数据-Ajax发送文件-Django自带序列化组件-Ajax结合sweetalert

    目录 一:前后端传输数据的编码格式(contentType) 1.研究post请求数据的编码格式 2.可以朝后端发送post请求的方式 3.前后端传输数据的编码格式 4.研究form表单 5.当for ...

  9. ajax接收遍历处理json格式数据

    ajax在前后端的交互中应用非常广泛,通过请求后台接口接收处理json格式数据展现在前端页面. 下面我们来简单用 ajax在本地做一个接收并处理json的小例子 首先我们要新建一个叫做data的jso ...

  10. 使用jQuery发送POST,Ajax请求返回JSON格式数据

    问题: 使用jQuery POST提交数据到PHP文件, PHP返回的json_encode后的数组数据,但jQuery接收到的数据不能解析为JSON对象,而是字符串{"code" ...

随机推荐

  1. powerdesigner导出模型为RTF

    在设计模型的时候需要将设计好的模型进行尺寸调整并复制到word中.这时候就需要利用导出报告功能,导出为word格式. 再做进一步处理. 1.选择[报告]-[Generate Report] 2.自动打 ...

  2. Java集合框架学习(六) LinkedList详解

    LinkedList介绍 ArrayList与LinkedList都是List接口的实现类,因此都实现了List的所有未实现的方法,只是实现的方式有所不同. LinkedList是采用链表的方式来实现 ...

  3. cf思维题

    1.B. Paranoid String 题意:操作一:01可以变成1,操作二:10可以变成0.给定一个串,判断字串经过若干次操作,能否长度变成1,统计数量. 思路:对01来说,1可以吃掉0,然后前边 ...

  4. 《系列一》-- 2、XmlBeanFactory 的类图介绍.md

    阅读之前要注意的东西:本文就是主打流水账式的源码阅读,主导的是一个参考,主要内容需要看官自己去源码中验证.全系列文章基于 spring 源码 5.x 版本. Spring源码阅读系列--全局目录.md ...

  5. Python中 r'', b'', u'', f'' 的含义

    python中 r'', b'', u'', f'' 的含义   r/R:非转义的原始字符串 与普通字符相比,其他相对特殊的字符,其中可能包含转义字符,即那些,反斜杠加上对应字母,表示对应的特殊含义的 ...

  6. Flutter学习(PV)——概览

    接触flutter有一段时间了,趁着刚过完年有点时间,记录一些有用的东西,一方面给自己备忘,另一方面也希望能帮到有需要的人~ 一.什么是flutter Flutter is Google's UI t ...

  7. 案例分享:Qt工程机械真空激光焊接系统软件产品定制(西门子PLC,mysql数据库,用户权限控制,界面配置,参数定制,播放器,二维图标,rgv小车,期限控制,参数调试等)

    需求   1.触摸屏控制,按照客户需求,ui由本司美工承担设计,显示分辨率1280 x 1024,同时支持鼠标操作.  2.权限控制:三种权限,分为管理员(可以定制模块界面,修改产品名称等定制化软件和 ...

  8. day04---虚拟主机网络配置的三种模式介绍

    课程大纲 补充:安装系统过程中 分区的知识 1.虚拟软件使用方法 2.操作系统网络配置 3.虚拟主机网络设置 4.操作系统远程连接 5.远程连接排错思路 补充:安装系统过程中 分区的知识 1.企业常见 ...

  9. Simulink模型指标分析与模型重构的最佳实践 - 软件模型质量保证不可忽视的一环

    在基于模型的开发中,优质的模型架构是生成优质代码的必要前提.静态模型分析对于模型的质量保证有着至关重要的作用,同时建模规范已在业内有着广泛而成熟的应用.然而建模规范并非模型设计原则合规性的唯一考量标准 ...

  10. 【Azure 服务总线】查看Service Bus中消息多次发送的日志信息,消息是否被重复消费

    问题描述 使用Service Bus,发现消息被重复消费.如果要查看某一条消息的具体消费情况,需要那些消息的属性呢? 问题解答 使用Azure Service Bus,当消费发送到服务端后,就会生产相 ...