フラスコアプリの同じページに出力結果を投稿するにはどうすればよいですか？

私はいくつかのテキストを入力として受け取り、pythonスクリプトを実行し、新しいページに行くことを除いて、同じhtmlページの出力を吐き出すフラスコアプリを持っています。なぜ新しいページに行くのかわかりません。フラスコアプリの同じページに出力結果を投稿するにはどうすればよいですか？

これは私のapp.pyファイルです：

#!/usr/bin/env python3 

from flask import * 
from flask import render_template 
from myclass import myfunction 

app = Flask(__name__) 

@app.route('/') 
def homepage(): 
    return render_template('index.html') 

@app.route('/', methods= ["POST"]) 
def background_process(): 
    if request.method == 'POST': 
     try: 
      story = request.form.get('story') 
      if story: 
       result = myfunction(story) 
       return render_template('index.html', **jsonify(result)) 
      else: 
       return jsonify(result='Input needed') 
     except Exception as e: 
      return (str(e)) 

if __name__ == "__main__": 
    app.debug=True 
    app.run()

そして、これが私のindex.htmlファイルです：入力が与えられると

<!DOCTYPE html> 
<html> 
    <head> 
     <link rel="stylesheet" href="../static/main.css"> 
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
     <script type=text/javascript> 
      $(function() { 
       $('a#process_input').bind('click', function() { 
       $.getJSON('/background_process', { 
        story: $('textarea[name="story"]').val(), 
       }, function(data) { 
        $('#result').text(data.result); 
       }); 
       return false; 
       }); 
      }); 
     </script> 
    </head> 

    <body> 
     <div class='container'> 
      <form> 
       <textarea id="text_input" rows="20" cols="80" name=story></textarea> 
       <br> 
       <a href=# id=process_input><button class='btn btn-default'>Submit</button></a> 
      </form> 
      <br> 
      <p><h2 align='center'>Result:</h2><h2 id=result align='center'></h2></p> 

     </div> 
    </body> 
</html>

、それはJSONに新しいページに結果を示していますフォーマット。私は同じページにそれを示したい。ここで何がうまくいかないの？ありがとう！

出典

2017-10-11 0x1

あなたは（ 'はmy_functionを投稿していなかった）'行うに思われます主要な仕事。 –

500語を処理するのにどれくらい時間がかかりますか？ –

秒未満です。私は問題が要求を得ることにあると思う。たぶん、多くのテキストを要求することはできません。私は投稿を使ってみましたが、同じページで出力を得ることができません。 – 0x1

すでに応答を処理することができるAjaxの方法を使用しているとして、あなたは代わりに新しいテンプレートをレンダリングする直接JSONレスポンスを返すことができます：

return jsonify(result=result)

また、あなたはポストのためにGET変更することもできますjQueryのメソッド：

<!DOCTYPE html> 
<html> 
    <head> 
     <link rel="stylesheet" href="../static/main.css"> 
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
     <script type=text/javascript> 
      $(function() { 
       $('a#process_input').bind('click', function() { 
       $.post('/', { 
        story: $('textarea[name="story"]').val(), 
       }, function(data) { 
        $('#result').text(data.result); 
       }); 
       return false; 
       }); 
      }); 
     </script> 
    </head>

（あなたが分離した2つの機能ではなく、私は以下の提案1を続ければ$.post('/background_process'を記述する必要があることに注意してください。）

あなたが1つの関数にコードを集めることができ

はその後、テンプレートは、GETメソッドでレンダリングされ、応答がPOSTからレンダリングされます。

app = Flask(__name__) 

@app.route('/', methods= ["GET", "POST"]) 
def homepage(): 
    if request.method == 'POST': 
     story = request.form.get('story') 
     if story: 
      result = myfunction(story) 
      return jsonify(result=result) 
     else: 
      return jsonify(result='Input needed') 

    return render_template('index.html') 

if __name__ == "__main__": 
    app.debug=True 
    app.run()

出典

2017-10-14 13:26:44 PRMoureu

ありがとうございます。これはうまくいった。 – 0x1

フラスコアプリの同じページに出力結果を投稿するにはどうすればよいですか？

答えて

関連する問題