Flask | JS获取python中的JSON数据

这是本博客第一篇正式文章，博客站点还没完全优化好，但是已经有值得记录的就先记录下来了。

本文适用于 Flask + Pandas + HTML + JS 的场景，其他场景不保证完全适用。

主要解决关于Flask传递JSON数据到JS出现‘&#34’的问题

JSON数据简介

// Todo：关于JSON数据的简介

JSON的全称是”JavaScript Object Notation”，意思是JavaScript对象表示法，它是一种基于文本，独立于语言的轻量级数据交换格式。

JS获取Flask的数据

Flask框架允许我们在HTML中直接获得python文件中传递过来的参数，如下：

app.py

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def Hello():
	return render_template('index.html',name='hello word!')

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body>
    <h1>{{ name }}</h1>
</body>
</html>

这样在html页面中就可以直接显示传递过来的数据了，在前端某些需要后端计算返回数据的时候还是比较实用的。

在Pandas下使用DataFrame.to_json()，将数据转化为JSON格式，我们可以使用type观察一下其类型，容易发现他本质上是一个字符串，所以将其传递给JS的时候，他就认为这是一个字符串类型的数据，所以，我们需要在JS文件中使用的时候，需要将string类型的JSON变量转化为object类型的JSON对象。

此处存在三种常用的方法进行¹

var json = JSON.parse(str);
var json = eval("(" + str + ")");
var json = (new Function("return " + str))();

但是我们在Flask中传递参数过来之，在利用以上方法进行解析的时候却出现了问题：

// sitePos形如 '[[obj00,obj01],[obj10,obj11],[obj20,obj21]'
var sitePos = {{ sitePos }}
console.log(sitePos)
sitePos = JSON.parse(sitePos)
console.log(sitePos)

当我的数据是两列数字类型的JSON格式的时候，完全没问题，程序顺利运行！

报错：JSON字符串在JS中引号转义为‘&#34’

但是当我加入一列字符串类型的数据时就出现问题了！第4行报错：Uncaught SyntaxError: Unexpected token & in JSON at position 1，仔细一看第2行的log，发现字符串类型的数据中，双引号被转义为"，我一拍脑袋就想到解决办法了🤪

错误方法1：在python中使用to_json()获得JSON字符串之后，利用replace('\"','')，直接将引号删除。好家伙，照样报错Uncaught SyntaxError: Unexpected token N in JSON at position 1，报错到了字符串内容而已，本质问题相同。
错误方法2：将双引号转化为单引号。。。不愧是我，继续错。
错误方法3：在JS中使用ajax获取，这个就不展开将了，可以成功获取，但是不知道什么原因不能稳定显示，总之不靠谱，以及浪费了大量时间。（赤裸裸的给我希望，但是让我绝望——我太菜）。

知道后来我遇到了这个男人[^ 2]，我终于悟了，这是因为JS出于对数据的安全考虑，将其进行转义，之前还看到一个不靠谱的文章说将安全保护关了。

正确解法：在HTML使用容器来获得数据，之后再在JS中利用DOM获得数据。将样式设置为style="display:none"是为了不让该元素容器显示，只作为媒介存在。

<div id="dataid" d="{{sitePos}}" style="display:none"></div>

<script>
    var sitePos = document.getElementById('dataid').getAttribute('d');
</script>

JS和HTML其实都可以通过来获得Python中传递的数据。

js字符串转化成json对象，使用JSON.parse()需要注意的地方 [^ 2]:Flask python 传输数据到前台 js 出问题 “' "”↩︎