无需重新加载页面即可动态呈现模板

Question

刚开始制作 Flask 应用程序来制作一个简单的向导。现在我只有两个 "Steps"，每个都有自己的 HTML 模板文件； Jinja 是模板语言。这样做的第一遍使得它在 "Next" 和 "Previous" 上路由到一个新页面。

很简单，但现在我想将其转换为单页应用程序。使用 Handlebars 就像拥有一个主容器 div，然后在单击 next/previous 按钮时呈现单独的模板一样简单。

有没有办法在 Flask 中做到这一点？一种使用 JS 或 Flask 将模板 HTML 文件渲染或加载到 div 容器的方法？

Answer 1

您可以使用 AJAX 从服务器加载内容而无需重新加载整个页面。

举个例子：

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>
  $(document).ready( function() {
        $('#next').click(function() {
           $.ajax("{{ url_for('myroute') }}").done(function (reply) {
              $('#container').html(reply);
           });
        });
  });
</script>

<input type="button" id="next" value="Next" />
<div id="container"></div>

无需重新加载页面即可动态呈现模板

Dynamically render template without reloading page

javascript

flask

handlebars.js