动态渲染模板，无需重新加载页面

Question

刚刚开始制作一个 Flask 应用程序来制作一个简单的向导。现在我只有两个“步骤”，每个步骤都有自己的 HTML 模板文件；Jinja 是模板语言。第一次通过，因此在“下一个”和“上一个”上它路由到一个新页面。

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

有没有办法在 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>