程序员经验分享-hwhale

如何在flask应用程序的同一页面上发布输出结果？

2024-02-10

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


由于您已经使用能够处理响应的 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()
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

jQuery

python

html

Flask

如何在flask应用程序的同一页面上发布输出结果？ 的相关文章

随机推荐

热门标签