Question

我有一个网络应用程序，在主页中，有两种方法可以上传音频文件。

1）文件上传。

2）现场记录并提交。

这个初始主页可以在这里看到： JSFiddle

所以，我们将数据发布到这里看到的/sheet（这是一个Flask服务器）。

@app.route('/')
def index():
  return render_template('index.html', request="GET")

@app.route('/sheet', methods=['POST'])
def sheet():
  file = request.files['file']
  if file and allowed_file(file.filename):
    pitches = handle_file(file)
  else:
    flash('Wrong file extension.')
    return redirect(request.url)
  print "this happens!"
  return render_template('sheet.html', pitches=pitches)

所以，问题是当使用文件上传方法完成时，这是有效的。呈现sheet.html并看到pitches的结果（handle_file()）。

然而，当使用录制＆amp;提交，即使我得到pitches（结果），＆＃34;这种情况也会发生！＆＃34;被打印但sheet.html 不呈现。屏幕保持在index.html。那是为什么？

Answer 1

在您的情况下，您需要拆分文件提交并显示结果。以这种方式定义您sheet路线：

from flask import (Flask, render_template, request,
                   redirect, flash, session, url_for)

...

@app.route('/sheet', methods=['POST', 'GET'])
def sheet():
    file = request.files['file']
    # if file and allowed_file(file.filename):
    if file:
        #   pitches = handle_file(file)
        pitches = ['pitch_0', 'pitch_1', 'pitch_2']
    else:
        flash('Wrong file extension.')
        return redirect(request.url)
    print("THIS HAPPENS!")
    session['pitches'] = pitches
    return redirect(url_for('result'))

定义新路线result：

@app.route('/result')
def result():
    pitches = session['pitches']
    return render_template('result.html', pitches=pitches)

这是result.html：

<!DOCTYPE html>
<html>
<body>

<h1>Results page</h1>
<p>This is the results page.</p>
    {{ pitches }}
</body>
</html>

这就是你的submit函数的样子：

function submit() {
  var fd = new FormData();
  fd.append('file', audioFile, 'audio.wav');
  var xhr = new XMLHttpRequest();

  xhr.open('POST', '/sheet', true);

  xhr.onreadystatechange = function() {
      if(xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200) {
        window.location.href = '/result';
      }
  }
  xhr.send(fd);
}

在您的情况下，XMLHttpRequest执行正确并且它接收到html响应，但id不会在浏览器中呈现它。我可能错了，但我认为XMLHttpRequest请求的工作方式是接收数据，例如，一些json并进一步处理它，或者如果你需要进入新页面，你需要在自己返回响应后重定向用户。无论如何，我的答案解决了你的问题。

XMLHttpRequest不呈现模板 - Flask，Javascript

1 个答案: