Question

我在线购买了预构建的HTML模板，并且尝试对其进行自定义，以便它可以与我的后端python应用程序对话。

HTML模板具有一个预先构建的静态条形图。静态是指将条形图的值硬编码（25、50、100）到JQuery代码中。我希望能够用变量（x，y，z）替换这些硬编码值，因此我可以让我的后端python应用程序发送要在图表中显示的数据，而不是硬编码值。

这是显示图表的预构建HTML模板中的JQuery代码：


!function($) {
    "use strict";
    var ChartJs = function() {};
            #some code
            data: [25, 50, 100] # THESE ARE THE HARD CODED VALUES 
}(window.jQuery),

//initializing
function($) {
    "use strict";
    $.ChartJs.init(data_1)
}(window.jQuery);

以下是激活JQuery的HTML代码：

<div>
  <canvas id="bar" height="300" class="m-t-10"></canvas>
</div>

这是我的后端python代码：

@app.route('/')
def some_function ():

    #some code
    x = 200
    y = 300
    z = 400

    return render_template ('some URL', x=x, y=y, z=z)

Id希望能够从python代码发送x，y和z的值，以替换JQuery中的25、50、100的硬编码值。

任何人都可以引导我朝着正确的方向前进。我对python很好，但是不了解JQuery。

Answer 1

如果jQuery代码包含在呈现的HTML模板的<script>标签中，请使用Flask的内置插值技术：

data: [{{ x }}, {{ y }}, {{ z }}]

Answer 2

我不是python或jquery的人，但是我在AngularJS和Java上做了很多工作。我建议稍微研究一下REST API的工作原理。

作为示例，您在后端有一个API链接，您的前端将像ex一样调用它。 /getChartData。这将以JSON格式返回您的数据。

更多信息：

https://api.jquery.com/jquery.get/

https://searchmicroservices.techtarget.com/definition/RESTful-API

https://www.w3schools.com/js/js_json_intro.asp

Answer 3

数据是否总是只有3个值？在这种情况下，您可以像这样将变量作为参数传递：

!function($) {
    "use strict";
    var ChartJs = function(x, y, z) {};
            #some code
            data: [x, y, z] # THESE ARE THE HARD CODED VALUES 
}(window.jQuery),

... 然后在调用函数时，从python传入变量（在PHP中，您将使用echo）

ChartJs(<?php echo $x . "," . $y . "," . $z; ?>);

如何将数据传递到JQuery脚本

3 个答案: