XMLHttpRequestはテンプレートをレンダリングしません - Flask、Javascript

ホームページにはオーディオファイルをアップロードする方法が2つあります。XMLHttpRequestはテンプレートをレンダリングしません - Flask、Javascript

1）ファイルのアップロード。

2）オンサイトで記録し、提出してください。

この初期ホームページはここで見ることができます： JSFiddle

そこで、我々は（これはフラスコサーバである）、ここで見られる/sheetにデータをPOST。

@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()）が表示されます。しかし

、これは、私がpitches（結果）を取得するにもかかわらず、を提出&を記録を使用して行われ、「この問題が発生しました！」 sheet.htmlはで、と表示されます。画面はindex.htmlのままです。何故ですか？

出典

2017-06-25 pk1914

レコーディングとコード提出を表示できますか？記録と提出で何が起こっているのですか？それが 'sheet'関数にどのように接続されていますか？ – Nurjan

JSFiddleには、両方のメソッド（ファイルアップロード、録音および送信）が表示されます。どちらの方法も最終的に 'sheet'を呼び出します。 – pk1914

あなたの状況では、ファイル提出を分割して結果を表示する必要があります。あなたにこの方法を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定義します。これはresult.htmlある

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

を：

<!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などのデータを受け取り、それをさらに処理することです。新しいページを取得する必要がある場合は、レスポンスが返された後にユーザーをリダイレクトする必要があります。いずれの場合でも私の答えはあなたの問題を解決します。

出典

2017-06-26 11:11:06 Nurjan

XMLHttpRequestはテンプレートをレンダリングしません - Flask、Javascript

答えて

関連する問題