ajax与python flask之间的表单数据传输

第一步我们还是先了解python flask以及ajax的基本语法
这里我就不解释基础东西了，我们直接进入正题

一.代码功能及内容描述

1. 传输数据形式：FormData，支持传输文本数据以及文件，可以一起穿，属于python字典的形式，或者json格式。
   

为防止报错，使用formdata()必须在ajax语句中加入红框配置

2. 动态加载页面：出发事件时调用ajax去先清空页面再加载数据，实现局部刷新。

清空数据：使用 .empty() 保留父标签
动态插入输入：那就得用for循环了

注意三个添加方法：

$('#hello').append("<div></div>")
这个是在标签的内部添加内容，为子及

$('#hello').after("<div></div>")
这个是在标签后追加代码，为同级

$('#hello').before("<div></div>")
这个是在标签前追加代码，为同级

二.关键代码

先来python flask部分：包含数据接收以及返回结果

# 注册
@app.route('/upload', methods=['GET', 'POST'])
def upload_image():
    if request.method == "POST":
        print("--- upload :")
        f = request.files['Photo']
        f_name = str(uuid.uuid1())
        f_path = "./static/upload/" + f_name + ".jpg"
        f.save(f_path)  # 存到静态文件的上传文件中
        # 记录上传文件的随机名称，下面通过列表获取，展示对比图片
        register_fileName.append(f_path)
        face_id = request.form["name"]
        print(face_id)
        # 提取特征
        img = cv2.imread("./static/upload/" + f_name + ".jpg")
        feature_list = get_face_feature(detector, recongizer, img)
        register_feature.append(feature_list[0])
        register_ID.append(face_id)
        dict_app['url_register'] = "./static/upload/" + f_name + ".jpg"
        dict_app["id"] = ""
        dict_app["conf"] = ""
        dict_app["register_fileName"] = register_fileName
        dict_app["register_ID"] = register_ID
        # 存到数据库
        db.insert(face_id, f_path, feature_list[0])
    return dict_app

注：关键部
dict_app 是一个字典，我设置为全局变量
f = request.files[‘Photo’] 取出了文件
face_id = request.form[“name”] 取出了文本信息

到我们js的代码：

function upload() {
    var face_id = document.getElementById("face_id").value
    var data = new FormData()
    data.append("Photo", $("#upload-file")[0].files[0])
    data.append("name",face_id)
        $.ajax({
            url: "http://127.0.0.1:8080/upload",
            method: "post",
            timeOut: 1000,
            data: data,
            dataType: 'json',
            cache: false,//上传文件无需缓存
            processData: false,//用于对data参数进行序列化处理 这里必须false
            contentType: false, //必须
            success: function (data) {
//                $(document).ready(function(){
//                   console.log("刷新界面")
//                   $('#hello').empty()
//                   $("#hello").load(location.href + " #hello>*",  "")
//                })
                $('#hello').empty()
                $('#image_data').empty()
//                if(data.register_fileName.length>2)location.replace(location.href);  //在服务端重新生成
                console.log(data.register_fileName.length)
                //获取数据后应当把输入框数据清空 <input type="text" name="face_id" id="face_id">
                $('#face_id').val("");
                //把注册的图片加载到html对应位置
                $('#url_register').attr('src', data.url_register);
                //把历史注册记录进行展示
                 let htmllet = ""
                 console.log("data.register_fileName.length"+data.register_fileName.length)
                 //每次加载新标签前把上次添加的标签清除
                if(data.register_fileName.length>1){
//                $('#hello').remove()
//                   $('#hello').empty()
                   console.log(data.register_fileName)
                   var index =0
                   var total =0 //防止添加过长导致穿透布局 最多添加12个
                   for (var i = data.register_fileName.length-2; i >=0 ; i--) {
                        if(total<12){
                            if(index<2){
                                $('#hello').append("<img style='display:inline;' src='"+data.register_fileName[i]+"' class='register-image'>")
                              }
                            else{
                                $('#hello').append("<div></div>")
                                $('#hello').append("<img style='display:inline;' src='"+data.register_fileName[i]+"' class='register-image'>")
                                index=0
                            }

                        }
                        $('#image_data').append("<img src="+data.register_fileName[i]+" class='register-image-data'><h3 style=' margin-bottom: 30px;'>"+data.register_ID[i]+"</h3>")


                        index+=1
                        total+=1


                   }

                }

            },
            error: function (data) {
            }
        })
    }

注：
返回数据在success中，
var face_id = document.getElementById(“face_id”).value 获取的是文本信息
$(“#upload-file”)[0].files[0] 获取图片

前端的代码只展示一部分：

            <form method="post"  enctype="multipart/form-data">
                <input type="file" name="the_file" class="u-border-none u-btn u-button-style u-palette-1-base u-btn-1"
                       border="none" id="upload-file">
                <p class="u-text u-text-1">人物姓名：</p><input type="text" name="face_id" id="face_id">
                <input type="button" class="u-border-none u-btn u-button-style u-palette-1-base u-btn-1"
                       onclick="upload()" value="注册">
            </form>

这个是表单的;只写里面的<input 就可以了

            <div id="hello">
            </div>

动态加载的部分就两句就可以了，如果很会用jquery选择器的话没有也可以，我这里就写个实打实的方便看