javascript - 使用 Flask 在单页应用程序中提交表单而无需重新加载

Question

我正在使用 python 开发单页 Flask 应用程序。要更改页面的内容，我只需调用一个隐藏一个 div 并显示另一个的 javascript 函数。

其中一个 div 包含一个表单，用户可以在其中上传文件，我通过一个 python 脚本运行该文件，该脚本解析文件中的数据。

问题是执行代码后，Flask 似乎要我重定向到一个新页面。我宁愿返回一个触发器来简单地运行我的 javascript 函数。

HTML 表单:

<form class='upload-form' id='upload-form' action="/upload" method='POST' enctype="multipart/form-data" onsubmit="return show_and_hide('load', 'upload')">
                            <input type="file" name='file' value="Browse...">
                            <input type="submit" value='Upload'>
                        </form>

Javascript 函数:

var callFunction;
    function show_and_hide(div_in, div_out){
        var shower = document.getElementById(div_in);
        var hider = document.getElementById(div_out);

        var hider_items = hider.children;
        var i;
        for(i = 0; i < hider_items.length; i++){
            hider_items[i].style.animation = "hide 1s";
        }

        callFunction = setTimeout(change_div, 1000, div_in, div_out);

        var shower_items = shower.children;
        var n;
        for(n = 0; n < shower_items.length; n++){
            shower_items[n].style.animation = "show 1s";
        }
        return true;
    }

还有 flask 应用程序(我实际上没有让它返回？？？):

@app.route('/upload', methods=['POST', 'GET'])
def upload_file():
        f = request.files['file']
        new_file_name = str(uuid.uuid1()) + '.zip'

        f.save(os.path.join('uploads/', new_file_name))
        path = 'uploads/' + new_file_name
        return ???

我很感激任何建议!谢谢!

Answer 1

您需要使用 JavaScript 将文件 POST 到 Flask，因为提交 HTML 表单总是会重定向您。这是一个使用 AJAX 的示例 How can I upload files asynchronously?

Flask 需要所有 View 函数(路由)返回响应以发送给客户端。您可以返回一个空字符串和一个 200 状态，让 Flask 知道您成功处理了请求。

@app.route('/upload', methods=['POST', 'GET'])
def upload_file():
        f = request.files['file']
        new_file_name = str(uuid.uuid1()) + '.zip'

        f.save(os.path.join('uploads/', new_file_name))
        path = 'uploads/' + new_file_name
        return '', 200