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

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>