烧瓶 render_template 不工作重定向的 URL 获取“#”而不是预期的 URL

如何解决烧瓶 render_template 不工作重定向的 URL 获取“#”而不是预期的 URL

下面是我的 Flask 代码。这个想法是，用户将首先看到 index.html，然后进行录音（由我的 html 和 jquery 代码在“模板”文件夹中的单独文件中处理）。录制后，用户将通过 XMLHttpRequest 将录制内容提交到新的 url ("/result")。请求将被 Flask 路由（'/result'）接收，然后一个新的网页将显示并打印出“transcript”变量值。现在，问题是，提交音频后，我可以在 Chrome 中看到新的 url 变为“127.0.0.1:5000/#”，而不是“127.0.0.1:500/result” ”。为什么会这样？

实际上，我之所以这么问，是因为我怀疑这就是新网页无法正确呈现的原因。新网页使用JQuery，并有一些动画来显示饼图字符的增加。如果我直接从本地打开新的网页 html 文件，我可以看到显示的动画。但是，如果我提交音频并希望它重定向到新网页，我将看不到动画，而只能看到网页上的静态数字。

from flask import Flask,request,redirect,url_for,render_template
import os

app = Flask(__name__)

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

@app.route('/result','POST'])
def result():
    transcript = ""
    if request.method == 'POST':
        print("POST method")
        file = request.files['audio_data']
        if file:
            print(file)
            transcript = "ABCD"
            return render_template('result.html',transcript=transcript)
        else:
            transcript = "file is empty"
            print(transcript)
    
    return render_template('result.html',transcript=transcript)



if __name__ == '__main__':

    app.run(host='127.0.0.1',port=5000,debug=True)

这是“index.html”中围绕 XMLHttpRequest 的代码：

                            myRecorder.objects.recorder.exportWAV(createDownloadLink);

                            function createDownloadLink(blob){
                                var url = (window.URL || window.webkitURL)
                                        .createObjectURL(blob);
                                // Prepare the playback
                                var audioObject = $('<audio controls></audio>')
                                        .attr('src',url);

                                // Prepare the download link
                                var downloadObject = $('<a>&#9660;</a>')
                                        .attr('href',url)
                                        .attr('download',new Date().toUTCString() + '.wav');

                                //name of .wav file to use during upload and download (without extendion)
                                var filename = new Date().toISOString();

                                //upload link
                                var upload = document.createElement('a');
                                upload.href="#";
                                upload.innerHTML = "Upload";
                                upload.addEventListener("click",function(event){
                                    var xhr=new XMLHttpRequest();
                                    // xhr.onload=function(e) {
                                    //     if(this.readyState === 4) {
                                    //         console.log("Server returned: ",e.target.responseText);
                                    //     }
                                    // };
                                    xhr.onreadystatechange = function() {
                                        if (xhr.readyState == XMLHttpRequest.DONE) {
                                            document.write(xhr.responseText);
                                        }
                                    }

                                    var fd=new FormData();
                                    fd.append("audio_data",blob,filename);
                                    xhr.open("POST","/result",true);
                                    xhr.send(fd);
                                });

                                // Wrap everything in a row
                                var holderObject = $('<div class="row"></div>')
                                        .append(audioObject)
                                        .append(downloadObject)
                                        .append(upload);

                                // Append to the list
                                listObject.append(holderObject);
                            }

这是“result.html”中的代码，它应该做饼图的动画：

<script type = "text/javascript" src="{{ url_for('static',filename='js/jquery-2.2.4.min.js') }}"></script>
 <script type = "text/javascript" src="{{ url_for('static',filename='js/jquery.appear.min.js') }}"></script>
 <script type = "text/javascript" src="{{ url_for('static',filename='js/jquery.easypiechart.min.js') }}"></script>
 <script>
    'use strict';

var $window = $(window);

function run()
{
    var fName = arguments[0],aArgs = Array.prototype.slice.call(arguments,1);
    try {
        fName.apply(window,aArgs);
    } catch(err) {
         
    }
};
 
/* chart
================================================== */
function _chart ()
{
    $('.b-skills').appear(function() {
        setTimeout(function() {
            $('.chart').easyPieChart({
                easing: 'easeOutElastic',delay: 3000,barColor: '#369670',trackColor: '#fff',scaleColor: false,lineWidth: 21,trackWidth: 21,size: 250,lineCap: 'round',onStep: function(from,to,percent) {
                    this.el.children[0].innerHTML = Math.round(percent);
                }
            });
        },150);
    });
};
 

$(document).ready(function() {
  
    run(_chart);
  
    
});

    
    </script>