前端接收flask后端的返回值

最新推荐文章于 2024-04-29 19:29:34 发布

lzm88123

最新推荐文章于 2024-04-29 19:29:34 发布

阅读量7.6k

点赞数 9

分类专栏： python 前端

本文链接：https://blog.csdn.net/qq_35498696/article/details/107008898

版权

python 同时被 2 个专栏收录

20 篇文章 2 订阅

订阅专栏

前端

3 篇文章 0 订阅

订阅专栏

前端接收flask返回主要有两种方法，一种是直接在html页面中嵌套语句，一种是利用js解析，后者更具通用性和可修改性。
第一种：
这种方法，后端的返回值可以是字典类型、数组或者单变量，但是不能是json格式，解析不到。data是返回的参数名，与要与前端html对应，名字要相同，前端可以直接取值。
前端代码：

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
    </head>
<table border="1"  style="margin:0 auto; background-color:#5abef8;">
    <tr>
        <th>名字</th>
        <th>编号</th> 
    </tr>
{% for i in data %}
    <tr>
        <td>{{ i.name }}<br>{{ i.name }}</td>
        <td>{{ i.num }}<br>{{ i.num }}</td>
    </tr>
{% endfor %}
</table>
</body>
</html>

后端代码：

@app.route("/")
def index():
	dic={}
	dic['name']='xiaomin'
	dic['num']=1
	return render_template('index.html',data=dic)

第二种方法：
这种方法利用了JSON.parse()，可以解析把后端发过来的格式转换成json格式的，当然后端要加一句话。json格式就是通用格式了，可以存放各种类型的数据。
前端代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">	
</head>
<body>
    <!--内容部分-->
	<div id="dataid" d="{{data}}" style="display:none"></div>
</body>
<script>
	var data = document.getElementById('dataid').getAttribute('d');//绑定以获取data值
	dataJson=JSON.parse(data);
	console.log(dataJson.name)
	console.log(dataJson.num)
</script>

后端代码：

@app.route("/")
def index():
	dic={}
	dic['name']='xiaomin'
	dic['num']=1
	dataJson=json.dumps(dic,ensure_ascii=False) #加这句话就可以把字典格式转换成json格式，字典格式在用JSON.parse()解析时会报错，与引号的转义有关系。
	return render_template('index.html',data=dataJson)

lzm88123

关注

9
点赞
踩
43

收藏

觉得还不错? 一键收藏
2
评论
前端接收flask后端的返回值

前端接收flask返回主要有两种方法，一种是直接在html页面中嵌套语句，一种是利用js解析，后者更具通用性和可修改性。第一种：这种方法，后端的返回值可以是字典类型、数组或者单变量，但是不能是json格式，解析不到。data是返回的参数名层，与要与前端html对应，名字要相同，前端可以直接取值。前端代码：<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8"&g
复制链接

扫一扫