[英]Flask jinja2 update div content without refresh page
当点击联系人,恢复,资源链接将更新(位置URL和div内容)但无需刷新页面时,需要实现[ http://webonise.co.uk/] [1 ]等功能。
@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 %}
如果在不刷新页面的情况下点击{ and dynamic template#}下的不同链接和rendar,我如何动态rendar event.html / contact.html内容?
<!--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方法来实现这一切吗?
您可以使用Flask-Sijax ,它可以帮助您为Flask应用添加Sijax支持。 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.