flask通过ajax动态生成页面的模板方式

最新推荐文章于 2025-07-20 09:26:07 发布

原创最新推荐文章于 2025-07-20 09:26:07 发布 · 3.2k 阅读

1 ·

CC 4.0 BY-SA版权

python 同时被 3 个专栏收录

9 篇文章

订阅专栏

ajax

4 篇文章

订阅专栏

flask

3 篇文章

订阅专栏

本文介绍了如何在Flask应用中通过Ajax请求来动态生成并渲染模板页面。传统方法是通过Ajax的success事件手动拼接页面，但这种方法易错且繁琐。作者发现可以利用Flask的模板功能，使得Ajax请求返回的是Flask的模板页面。示例代码包括前端的HTML和jQuery部分，以及后端的Ajax接收函数和对应的模板html（ajax_receive.html）。点击“添加”按钮后，页面会动态添加两个按钮。

之前用的都是在ajax里面的success里面通过+=的方式手动拼接页面，虽然这样也行，但是十分的麻烦，而且容易出错。
google了一下，发现还有一种模板的方式（其实flask页面的渲染也是模板类型，就是没有想到ajax也可以返回flask的模板页面）
下面就在文章里面介绍一下如何在flask通过ajax请求模板然后在前台渲染出来
话不多说直接上代码
先展示前端的基本页面，基本功能是通过点击“添加”按钮动态在页面的button_div里面添加两个按钮

{% extends "base.html" %}
{% block title %}测试首页{% endblock %}

{% block message %}
{% endblock %}

{% block css %}
{% endblock %}

{% block main %}
<div class="row">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <div class="panel panel-default panel-dropdown card-view">
            <div class="panel-heading">
                <button type="button" class="btn btn-danger text-left" id="btn_add">添加</button>
            </div>
            <div class="panel-body">
                <div class="button-list" id="button_div">
                    <!--动态添加按钮-->
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block js %}
    <script src="{{ url_for('static', filename='test/js/main.js') }}"></script>
{% endblock %}

然后是jq代码

$('#btn_add').click(function () {
    $.ajax({
        url: '/test/ajax_receive',
        success: function (response) {
            $('#button_div').html(response)
        }
    })
});

最后是后台的ajax接收函数

@test.route('/ajax_receive')
def ajax_receive():
    data = {
        'first_btn_id': 'btn_1',
        'first_btn_name': '第一个按钮',
        'second_btn_id': 'btn_2',
        'second_btn_name': '第二个按钮',
    }
    return render_template('/test/ajax_receive.html', data=data)

然后就是模板html（ajax_receive.html）

<button id="{{ data['first_btn_id'] }}">{{ data['first_btn_name'] }}</button>
<button id="{{ data['second_btn_id'] }}">{{ data['second_btn_name'] }}</button>

这样就可以在点击“添加”按钮后动态的把两个按键添加到页面了。