教你如何使用flask實現ajax資料入庫

華為雲開發者社群發表於2022-03-01
Flask
摘要：在正式編寫前需要了解一下如何在 python 函式中去判斷，一個請求是 get 還是 post。

本文分享自華為雲社群《【首發】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實現ajax資料入庫

資料傳遞到後臺之後，通過將 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['引數名'] 。

 

點選關注，第一時間瞭解華為雲新鮮技術~

相關文章