如何在燒瓶應用程序中的相同頁面上發佈輸出結果？

我有一個燒瓶應用程序，它需要一些文本作爲輸入，運行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>

（請注意，你需要寫$.post('/background_process'如果保持兩個獨立的功能，而不是一個我下面提出）

然後你就可以在一個功能集的代碼，模板將與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

如何在燒瓶應用程序中的相同頁面上發佈輸出結果？

回答

相關問題