使用 Jquery 的 Flask 模板中的编码问题答案

【问题标题】：Encoding Issue in Flask Template with Jquery使用 Jquery 的 Flask 模板中的编码问题
【发布时间】：2018-03-02 20:26:36
【问题描述】：

我有两个模板，第一个只是从数据库中提取数据并在页面上显示它们，第二个将相同的数据传递给提供布局和其他内容的 jquery 'tabulator'。问题是显然相同的 {{ place.name }} 在第一个上打印为Chips &amp; Beers，在第二个上打印为Chips &amp; Beers。

这是第一个模板

<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
    <title>Milano - Publist</title>
</head>

<body>

    <div class="container">
        <table>
            <tr>
                <th>NOME</th>
            </tr>
            {% for place in places %}
                <div class="row">
                    <tr>
                        <td>{{ place.name }}</td>

                    </tr>
                </div>
            {% endfor %}
        </table>
</body>

这个是带有jquery和制表符的模板。

<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
    <link href="static/tabulator.min.css" rel="stylesheet">
    <title>Milano - Publist</title>
</head>

<body>

    <div class="container">
        <script type="text/javascript" src="static/jquery.js"></script>
        <script type="text/javascript" src="static/jquery-ui.min.js"></script>

        <script type="text/javascript" src="static/tabulator.min.js"></script>
        <div id="example-table"></div>
        <script type="text/javascript">

        var tabledata = [];
        {% for place in places %}
            var line = {}
            line.name = "{{ place.name }}"
            tabledata.push(line)
        {% endfor %}
            //load sample data into the table

            $("#example-table").tabulator({
            height:"100%", // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
            layout:"fitColumns", //fit columns to width of table (optional)
            columns:[ //Define Table Columns
                {title:"Nome", field:"name", width:150}
            ],
        });

         $("#example-table").tabulator("setData", tabledata);
        </script>

    </div><!-- /.container -->
</body>

我无法找出编码实际发生的位置。

【问题讨论】：

标签： javascript jquery flask jinja2

【解决方案1】：

根据文档：Formatting Data

注意：为防止代码注入，任何用于显示文本（纯文本、文本区域、金钱、电子邮件、链接）的格式化程序都会首先对数据进行清理，以防止任何潜在有害的 HTML 或 JavaScript 进入表格，这导致任何此类数据显示为其纯文本替代。如果您希望 HTML 正确显示，请使用 html 格式化程序，但请注意您的数据是否可以被用户编辑，这可能会导致恶意脚本注入。

你看到的是一个简单的 HTML 编码，它是为了你的应用程序的安全而存在的。您可以尝试使用formatter:"html" 或自行准备自定义过滤器。

【讨论】：