Flask--使用ajax进行局部刷新(GET,POST方法)

最新推荐文章于 2022-07-09 22:50:13 发布

phoenix339

最新推荐文章于 2022-07-09 22:50:13 发布

阅读量9.2k

点赞数 8

分类专栏： python Flask 文章标签： Flask ajax 局部刷新 python

本文链接：https://blog.csdn.net/phoenix339/article/details/96431010

版权

本文介绍了如何使用Flask和Ajax实现网页的局部刷新。通过Ajax GET更新页面内的div元素，POST方法则用于提交表单数据，同时保持URL不变。在Flask的视图函数中配置相应的路由和处理函数，确保数据的正确接收和响应。Ajax POST提交时需避免使用button，以防误触发当前页面的POST请求。示例展示了如何处理POST数据并返回HTML，更新特定div的内容。

摘要由CSDN通过智能技术生成

想实现网站只曝露index和login两个页面，让模板文件更为抽象、模块化，令其余url全部隐藏，使用ajax进行页面局部刷新即可实现。

1. ajax GET html：

<script type="text/javascript">
    function GETInWebRefresh(url) {
    
        $.ajax({
    
            type: "GET",
            url: url,
            dataType: "html",   // 期待后端返回数据的类型
            success: function (data) {
    //返回数据根据结果进行相应的处理
                $("#content").html(data);
            },
            error: function () {
    
                $("#content").html("获取数据失败！");
            }
        });
    }
</script>

可实现页面内局部刷新，获取html数据后，替换指定div，这里是令当前页面的id=content的div代码块刷新为指定的url返回的html代码块。

<a href="javascript:void(0);" onclick="GETInWebRefresh('/dataQuery/')"><i class="fa fa-table fa-fw"></i> Table</a>

在按钮中设置href="javascript:void(0);"，保证url不会变动，使用onclick进行ajax调用，onclick="GETInWebRefresh('/dataQuery/')"指定获取的页面（在view中配置/dataQuery/的路由和函数）。

view文件配置路由和函数

@app.route('/dataQuery/', methods=['GET'])
def dataQuery():
    return render_template('dataQuery.html')

如果是需要提交表单等POST操作，则需要调整一些项目代码细节：

2. ajax POST html：

    <script type="text/javascript">
        function POSTInWebRefresh(url) {
    
            data = $('#form').serialize();  // 将id=form的表单数据序列化
            $.ajax({
    
                type: "POST",
                url: url,
                data: JSON.stringify(data), // 将data转化为字符串
                contentType: 'application/json; charset=UTF-8', // 指定contentType
                dataType: "html",  // 注意：这里是指希望服务端返回的数据类型
                success: function (data) {
     // 返回数据根据结果进行相应的处理
                    $("#table"