Flask jinja2 更新 div 没有刷新页面的内容

Question

需要实现一些功能，例如 [http://webonise.co.uk/][1] 单击联系人、恢复、资源时 link 将更新（位置 URL&div 内容）但不刷新页。

Flask 视图函数

@app.route('/')
def index():
    flash('Welcome')
    return render_template('index.html')

index.html下是扩展base.html

{% block content %}
    {{super()}}
    <section class="content">
        <a href="#"><i class="mdi-event"></i>Event</a>
        <a href="#"><i class="mdi-contact"></i>Contact</a>
        <div class="board">
            {# dynamic template #}
            {# without using {{% include 'event.html' %}} #}
        </div>
    </section>
{%- endblock %}

当 link 不同时，如何动态渲染 event.html / contact.html 内容在 {# dynamic template #} 下单击并渲染而不刷新页面 ?

<!--event.html-->
<ul class="list">
    <li>
        <h3>123</h3>
        <p>abc</p>
    </li>
</ul>

我的尝试

导入 jinja2 环境但仍然不知道如何实现这个

env = Environment(autoescape=True,
loader=FileSystemLoader(os.path.join(os.path.dirname(__file__), 'templates')))
@app.route('/')
def index():
    board = env.get_template('event.html')
    flash('Welcome Home Tyler')
    return render_template('index.html', board=board)

真的需要ajax技术get/post方法来实现这一切吗？

Answer 1

您可以使用 Flask-Sijax which helps you add Sijax support to your Flask app. Sijax 是一个 python/jquery 库，它使 AJAX 易于在您的 Web 应用程序上使用。或者你可以这样做：

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

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

Flask jinja2 更新 div 没有刷新页面的内容

Flask jinja2 update div content without refresh page

javascript

python

jquery

jinja2

flask

Flask 视图函数

我的尝试