Question

我正在努力弄清楚我在这里犯的错误。

完整的故事：我已经将一些数据作为JSON保存到数据库中，如此

当我使用代码I 从数据库中复制并粘贴代码来调用此函数时。

<script>
particlesJS(
  {"particles":{"number":{"value":80,"density":{"enable":true,"value_area":800}},"color":{"value":"#000000"},"shape":{"type":"circle","stroke":{"width":0,"color":"#000000"},"polygon":{"nb_sides":5},"image":{"src":"img/github.svg","width":100,"height":100}},"opacity":{"value":0.5,"random":false,"anim":{"enable":false,"speed":1,"opacity_min":0.1,"sync":false}},"size":{"value":3,"random":true,"anim":{"enable":false,"speed":40,"size_min":0.1,"sync":false}},"line_linked":{"enable":true,"distance":150,"color":"#ffffff","opacity":0.4,"width":1},"move":{"enable":true,"speed":6,"direction":"none","random":false,"straight":false,"out_mode":"out","bounce":false,"attract":{"enable":false,"rotateX":600,"rotateY":1200}}},"interactivity":{"detect_on":"canvas","events":{"onhover":{"enable":true,"mode":"repulse"},"onclick":{"enable":true,"mode":"push"},"resize":true},"modes":{"grab":{"distance":400,"line_linked":{"opacity":1}},"bubble":{"distance":400,"size":40,"duration":2,"opacity":1,"speed":3},"repulse":{"distance":100,"duration":0.4},"push":{"particles_nb":4},"remove":{"particles_nb":2}}},"retina_detect":true}
);
</script>

一切正常。但是，当我通过Python Flask传递它时...

@app.route('/load_ban', methods = ['GET', 'POST'])
def load():
  banner = get_banner_data()

  but_txt = banner.button_text
  ban_txt = banner.banner_text
  text_color = banner.text_color
  button_color = banner.button_color
  button_border_color = banner.button_border_color
  button_size = banner.button_size
  banner_size = banner.banner_size
  preset = banner.animated_presets

return render_template('banner.html', but_txt=but_txt, ban_txt=ban_txt, text_color = text_color, button_color = button_color, button_border_color = button_border_color, button_size = button_size, banner_size = banner_size, preset = preset)

我使用以下代码：

<script>
particlesJS(
  {{preset}}
);
</script>

它不起作用。我不完全确定为什么，因为{{preset}}的内容应该与DB内容完全相同，对吧？

我也尝试过JSON.parse（{{preset}}），但这也不起作用。

关于我可能做错什么的任何想法？希望我忽略了一些相当简单的事情。

更新：这是呈现模板中的源代码：

    <script>
    particlesJS(
      {&#34;particles&#34;:{&#34;number&#34;:{&#34;value&#34;:80,&#34;density&#34;:{&#34;enable&#34;:true,&#34;value_area&#34;:800}},&#34;color&#34;:{&#34;value&#34;:&#34;#000000&#34;},&#34;shape&#34;:{&#34;type&#34;:&#34;circle&#34;,&#34;stroke&#34;:{&#34;width&#34;:0,&#34;color&#34;:&#34;#000000&#34;},&#34;polygon&#34;:{&#34;nb_sides&#34;:5},&#34;image&#34;:{&#34;src&#34;:&#34;img/github.svg&#34;,&#34;width&#34;:100,&#34;height&#34;:100}},&#34;opacity&#34;:{&#34;value&#34;:0.5,&#34;random&#34;:false,&#34;anim&#34;:{&#34;enable&#34;:false,&#34;speed&#34;:1,&#34;opacity_min&#34;:0.1,&#34;sync&#34;:false}},&#34;size&#34;:{&#34;value&#34;:3,&#34;random&#34;:true,&#34;anim&#34;:{&#34;enable&#34;:false,&#34;speed&#34;:40,&#34;size_min&#34;:0.1,&#34;sync&#34;:false}},&#34;line_linked&#34;:{&#34;enable&#34;:true,&#34;distance&#34;:150,&#34;color&#34;:&#34;#ffffff&#34;,&#34;opacity&#34;:0.4,&#34;width&#34;:1},&#34;move&#34;:{&#34;enable&#34;:true,&#34;speed&#34;:6,&#34;direction&#34;:&#34;none&#34;,&#34;random&#34;:false,&#34;straight&#34;:false,&#34;out_mode&#34;:&#34;out&#34;,&#34;bounce&#34;:false,&#34;attract&#34;:{&#34;enable&#34;:false,&#34;rotateX&#34;:600,&#34;rotateY&#34;:1200}}},&#34;interactivity&#34;:{&#34;detect_on&#34;:&#34;canvas&#34;,&#34;events&#34;:{&#34;onhover&#34;:{&#34;enable&#34;:true,&#34;mode&#34;:&#34;repulse&#34;},&#34;onclick&#34;:{&#34;enable&#34;:true,&#34;mode&#34;:&#34;push&#34;},&#34;resize&#34;:true},&#34;modes&#34;:{&#34;grab&#34;:{&#34;distance&#34;:400,&#34;line_linked&#34;:{&#34;opacity&#34;:1}},&#34;bubble&#34;:{&#34;distance&#34;:400,&#34;size&#34;:40,&#34;duration&#34;:2,&#34;opacity&#34;:1,&#34;speed&#34;:3},&#34;repulse&#34;:{&#34;distance&#34;:100,&#34;duration&#34;:0.4},&#34;push&#34;:{&#34;particles_nb&#34;:4},&#34;remove&#34;:{&#34;particles_nb&#34;:2}}},&#34;retina_detect&#34;:true}
    );
    </script>

Answer 1

将其更改为{{preset|safe}}，它应该有效

Javascript中的Flask变量不会显示

1 个答案: