焦点信息:Flask如何接收前端ajax传来的表单(包含文件)
来源:脚本之家    时间:2023-01-04 09:58:37


(资料图片)

目录
Flask接收前端ajax传来的表单Flask利用ajax进行表单请求和响应总结

Flask接收前端ajax传来的表单

HTML,包含一个text类型文本框和file类型上传文件





    
    
    
    拍照



    

拍照上传演示

用户名:

上传
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <script> function upload() { var data = new FormData($("#upForm")[0]); //注意jQuery选择出来的结果是个数组,需要加上[0]获取 $.ajax({ url: "/do", method: "POST", data: data, processData: false, contentType: false, cache: false, success: function (ret) { console.log(ret) } }) //return false //表单直接调用的话应该返回false防止二次提交,
} </script>

Python

import os
from flask import Flask, render_template, request, jsonify
from werkzeug import secure_filename

TEMPLATES_AUTO_RELOAD = True

app = Flask(__name__)
app.config.from_object(__name__)
# 设置Flask jsonify返回中文不转码
app.config["JSON_AS_ASCII"] = False

PIC_FOLDER = os.path.join(app.root_path, "upload_pic")


@app.route("/", methods=["GET"])
def hello():
    return render_template("index.html")


@app.route("/do", methods=["POST"])
def do():
    data = request.form
    file = request.files["pic"]
    result = {"username": data["username"]}
    if file:
        filename = secure_filename(file.filename)
        file.save(os.path.join(PIC_FOLDER, filename))
        result["pic"] = filename

    return jsonify(result)


if __name__ == "__main__":
    app.run(debug=False, host="0.0.0.0", port=8000)

Flask利用ajax进行表单请求和响应

前端html代码


    输入框: 
    

js代码

//首先需要禁止form表单的action自动提交
$("#demo_form").submit(function(e){
    e.preventDefault();

    $.ajax({
        url:"/demo",
        type:"POST",
        data: $(this).serialize(),   // 这个序列化传递很重要
        headers:{
            "X-CSRF-Token": getCookie("csrf_token")
        },
        success:function (resp) {
            // window.location.href = "/admin/page";
            if(resp.error){
                console.log(resp.errmsg);
            }
        }
    })
});

python Flask框架的代码

@app.route("/demo", methods=["POST"])
def demo():
    nick_name = request.form.get("nick_name")
    print(nick_name)
    return "ok"

表单序列化很重要,否则获取的数据是None。

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

关键词: 希望大家 首先需要 上传文件

上一篇:

下一篇:

X 关闭

X 关闭