教你如何使用flask实现ajax数据入库-6ren

教你如何使用flask实现ajax数据入库

转载作者：知者更新时间：2024-03-13 06:09:19

25

4

本文分享自华为云社区《【首发】flask 实现ajax 数据入库，并掌握文件上传》，作者：梦想橡皮擦。

flask 实现ajax 数据入库

在正式编写前需要了解一下如何在 python 函数中去判断，一个请求是 get 还是 post。

python 文件代码如此所示：

# route()方法用于设定路由；
@app.route('/hello.html', methods=['GET', 'POST'])
def hello_world():
    if request.method == 'GET':
        # args = request.args
        return render_template('hello.html')

    if request.method == "POST":
        print("POST请求")

上述代码通过 requests.method 属性判断当前请求类型，然后实现相应的逻辑。
注意上述内容中的 @app.route('/hello.html', methods=['GET', 'POST']) ，绑定的方法由参数 methods 决定。

HTML 页面代码如下所示：

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <title>这是第一个HTML页面</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>

<body>
    {{name}}
    <input type="button" value="点击发送请求" id="btn" />
    <script>
        $(function() {
            $('#btn').on('click', function() {
                alert($(this).val());

            });
        })
    </script>
</body>

</html>

在 HTML 页面中提前导入 jquery 的 CDN 配置，便于后续实现模拟请求操作。

再次完善一些 POST 请求的相关参数判断，通过 requests.form 获取表单参数。

# route()方法用于设定路由；
@app.route('/hello.html', methods=['GET', 'POST'])
def hello_world():
    if request.method == 'GET':
        args = request.args
        name = args.get('name')
        return render_template('hello.html',name=name)

    if request.method == "POST":
        print("POST请求")
        arges = request.form
        print(arges)
        return "PPP"

同步修改一下前端请求部分，这里改造主要需要的是前端知识。

<body>
    {{name}}
    <input type="button" value="点击发送请求" id="btn" />
    <script>
        $(function() {
            $('#btn').on('click', function() {
                //alert($(this).val());
                $.post('./hello.html', function(result) {
                    console.log(result);
                })
            });
        })
    </script>
</body>

测试的时候同步开启浏览器的开发者工具，并且切换到网络请求视图，查看请求与返回数据。

数据传递到后台之后，通过将将 flask 与 mysql 实现对接，完成一个入库操作，然后将数据存储到 MySQL 中。

实现文件上传

了解了POST请求之后，就可以通过该模式实现文件上传操作了。
优先修改 HTML 页面，实现一个文件选择按钮。

<input type="file" id="file" />
<script type="text/javascript">
    $(function() {
        $('#btn').on('click', function() {
            //alert($(this).val());

            $.post('./hello.html', function(result) {
                console.log(result);
            })
        });
        var get_file = document.getElementById("file");
        get_file.onchange = function(e) {

            file = e.currentTarget.files[0]; //所有文件，返回一个数组
            var form_data = new FormData();

            form_data.append("file", file);
            console.log(form_data);

            form_data.append("file_name", e.currentTarget.files[0].name);
            $.ajax({
                url: '/upload',
                type: 'post',
                data: form_data,
                contentType: false,
                processData: false,
                success: function(res) {
                    console.log(res.data);
                }
            });
        }
    })
</script>

服务端处理文件的代码如下所示

@app.route('/upload', methods=['POST'], strict_slashes=False)
def upload():
    if request.method == "POST":
        print("POST请求")
        file = request.files.get('file')
        name = request.form.get('file_name')
        print(name)
        file.save("./"+name)
        # print(name)
        return "PPP"

这里需要注意的是如果 Python 端存在BUG，前端的AJAX请求会出现 400或者500错误。
文件名通过前端传递 file_name 参数获取。
本案例可以扩展上传成功之后，返回JSON数据到前端进行后续处理。

项目在实测的过程中发现一个问题，在读取前台传递的文件流时，需要使用 request.files.get() 方法实现，而不能用 request.form['参数名'] 。

点击关注，第一时间了解华为云新鲜技术~

25

4

0

文章推荐： MINA核心结构和处理消息的逻辑流程

文章推荐： Use Of Enumerations - 枚举的使用 - Java - 细节狂魔

文章推荐： c++ iou学习笔记

coq - 教 coq 检查终止
与其他许多不同，Coq 接受一个可选的显式参数，该参数可用于指示固定点定义的递减结构。从 Gallina 规范，1.3.4， Fixpoint ident params {struct ident0
debugging - 教 child 调试代码？
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引起辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the he
c# - 教 ANN 如何添加
前言:我目前正在学习 ANN，因为我在大约 83 个类别中有大约 18500 张图像。它们将用于训练 ANN 以实时识别大致相等的图像。我按照书中的图像示例进行操作，但它对我不起作用。所以我要回到开头
c++ - 教 cout 优雅地处理空指针
在我的程序中，我处理有时为 NULL 的 C 风格字符串(类型为 char *)。我想教 cout 优雅地处理这些问题(即打印“(null)”而不是段错误)。我的第一次尝试: ostream& op
c++ - 教 gdb 从核心文件中理解微线程
我正在开发一个采用(定制的)微线程解决方案的大型程序。有时我需要调试崩溃。在这种时候，能够从一个微线程切换到另一个微线程是很有用的。如果我正在进行实时调试，我可以将所有寄存器替换为来自微线程上下文的
r - 教 Notepad++ 折叠新的多行注释 (R)
我可以教 Notepad++ 在它看到多行注释时应用折叠，其中注释以井号开头，多行注释是连续行上的井号吗？ # This is a comment # It continues on the next
algorithm - 教 child Pascal 的简单问题
我被要求为一个 child 辅导 Pascal。尽管在我设法获得教程之前从未见过 Pascal，但我现在知道的足以教他了。我给你们写信是想看看是否有人能给我指出一些涉及简单算法的基本练习，比如:对这
javascript - 教 children 用 Javascript 编程的书籍
按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
unicode - 教 OCR 理解 NSA 和 FISC 修订
我正在维护来自外国情报监视法庭的大量编辑文件的文件。它们带有大段文本，如下所示: 当 OCR 尝试处理此问题时，您会收到如下文本: production of this data on a dail
c++ - 教 child C++ 时使用 "include stdafx.h"？
今年夏天，我将教高中生使用 C++ 编程。我必须在一周内教给他们 Material 。通读了公司给我的教程，他们建议我一开始就在程序中使用“include stdafx.h”。你觉得呢 includ
c# - 教 friend 儿子 C#，在他的笔记本电脑上设置 IDE 的最简单方法？
我需要在他的笔记本电脑上安装一个 c# ide(免费)，我需要下载 sdk 还是 windows 7 带有 c# 编译器？ (从头开始设置已经有一段时间了) 最佳答案你可以试试Visual C# 2
ruby-on-rails - 教 Rails 3 与 Amazon Redshift 对话 - 设置参数 "client_min_messages"的权限被拒绝
背景我刚刚在 AWS 上启动了一个新的 Redshift 实例，我可以毫无问题地通过 psql cli 客户端连接到它。问题我正在尝试让我的 Rails 3 应用程序连接到 Redshift 盒

首页

博学

6Ren·AI

商城