如何通过JavaScript的XMLHttpRequest获取Flask视图函数的返回值

核心问题点 #

• 前端没有为XMLHttpRequest绑定请求完成的回调监听，请求发送后没有逻辑去接收后端返回的结果，自然拿不到transcript值
• 前端强制设置了req.responseType = 'json'，但后端返回的是纯文本字符串，XMLHttpRequest会尝试将纯文本解析为JSON格式，解析失败后response属性会变为null
• 额外问题：前端发送POST请求时没有设置对应的Content-Type请求头，后端如果需要接收前端传递的textTranscribed参数会无法正常解析；后端代码中遍历多个视频时transcript变量会被反复覆盖，最终仅返回最后一个视频的转写结果

修复方案 #

前端代码修改 #

<button type="button" id="transcribe" onclick="loadTranscribeFile()"> Transcribe </button>
<script>
     function loadTranscribeFile() {
             var req = new XMLHttpRequest();
             req.open('POST', '/transcribe', true);
             // 若后端返回纯文本，无需设置responseType为json，需要返回json的话可保留该配置
             // req.responseType = 'json';
             // 设置POST请求的内容类型
             req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
             // 绑定请求完成回调接收返回值
             req.onload = function() {
                if (req.status >= 200 && req.status < 300) {
                    // 这里拿到返回的transcript值
                    const transcript = req.responseText;
                    console.log('拿到转写结果：', transcript);
                    // 后续业务逻辑自行处理
                } else {
                    console.error('请求失败，状态码：', req.status);
                }
             }
             // 对传递的参数做url编码避免特殊字符报错
             req.send("textTranscribed=" + encodeURIComponent(document.getElementById('textTranscribed').value));
     }
</script>

后端代码可选修改（如果需要返回JSON格式适配前端responseType=json的配置） #

from flask import jsonify

@app.route("/transcribe", methods=['POST'])
def transcribe():
        transcript = ""
        videos = glob.glob("static/uploads/video/*")
        ToEmptyDir()
        for video in videos:
            prs = parse_seconde(video)
            # 多个视频的话这里改成+=拼接，不要直接赋值避免覆盖之前的结果
            transcript += cut_video(prs, video).lstrip()
            insertToFile(video.split("\\")[1].split(".")[0], transcript)
        txtFile = glob.glob(os.getcwd() + "/*.txt")
        # 返回JSON格式响应
        return jsonify({"transcript": transcript})

如果后端改成返回JSON的话，前端可以保留req.responseType = 'json'的配置，回调里通过req.response.transcript拿到转写结果。

内容的提问来源于stack exchange，提问作者Sarindra Thérèse