如何在烧瓶应用程序的同一页面上发布输出结果?

Posted

技术标签:

【中文标题】如何在烧瓶应用程序的同一页面上发布输出结果?【英文标题】:How to post the output result on the same page in flask app? 【发布时间】:2018-03-23 17:08:11 【问题描述】:

我有一个烧瓶应用程序,它接受一些文本作为输入,运行一个 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 格式在新页面中显示结果。我想在同一页面上显示它。这里出了什么问题? 谢谢!

【问题讨论】:

你没有发布my_function(),这似乎是主要工作。 处理500字需要多长时间? 不到一秒。我认为问题在于获取请求。可能获取请求不能接受这么多文本。我尝试使用 post,但无法在同一页面上获得输出。 【参考方案1】:

由于您已经在使用能够处理响应的 ajax 方法,因此您可以直接返回 JSON 响应而不是渲染新模板:

return jsonify(result=result) 

您可能还想将 JQuery 方法的 GET 更改为 POST:

<!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()

【讨论】:

以上是关于如何在烧瓶应用程序的同一页面上发布输出结果?的主要内容,如果未能解决你的问题,请参考以下文章

我们如何使用 Flask 对 SQL Server 搜索结果进行分页

在烧瓶中保护 REST api

在同一页面上提交表单时如何预填充下拉列表?

如何在烧瓶 Web 应用程序中显示分类报告

如何分析烧瓶端点?

如何从两个不同的 Laravel 查询构建器中获取我的两个结果集以同时显示在同一页面上?