解决Python后端传值至前端时JSON双引号被转义的问题

Python后端与HTML前端的数据交互

在Python后端处理中，我们需要将特定数据传递给前端页面。

def mallTemplateConfig(request):
  gameRole_edit = request.session.get('gameRole_edit', []) #获取json串
  return render(request, "operationGL/mallTemplateConfig.html",
         {
          'gameRole_edit': json.dumps(gameRole_edit)
         })

前端HTML部分负责接收并展示这些数据。

按照常规写法，数据可以正常显示，表面上看没有异常。

<label>{{ gameRole_edit }}</label>

前端JSON解析与转义问题

在JavaScript部分，我们需要对后端传来的数据进行解析和处理。

如果直接输出JSON字符串，其中的双引号会被HTML实体转义为&quot;，导致后续解析出错。

console.log("{{ gameRole_edit }}")

避免转义的解决方案

采用以下方法可以直接转换JSON字符串，避免双引号被转义。

JSON.parse("{{ gameRole_edit|escapejs }}")

Flask环境下tojson方法的应用

补充知识：解决Flask后台数据传递到前端字符被转义的情况。

在使用Flask结合Echarts进行数据可视化开发时，发现后台数据虽然传递到了前台，但前端图表却无法显示。

通过F12开发者工具查看控制台报错，发现数据中的引号被转义成了“&#39”，这是Flask为了防止JavaScript注入而采取的安全机制。

我需要的数据格式为标准的JSON列表结构。

使用tojson过滤器

对于一个列表数据，若希望避免引号被转义，只需在模板变量后添加tojson过滤器即可。

这样数据就能正常显示，以下是正常显示的数据示例。

以上关于Python传到前端的数据双引号被转义问题的解决方法就是全部内容，希望能给大家一个参考，也希望大家多多支持本站。