Python flask web应用程序赢得't获取用户输入

Python flask web application won't get user inputs

本文关键字：获取 用户 输入 web flask 应用程序 Python      更新时间：2023-09-26

我希望通过点击网页上的HTML链接来处理python脚本。以下是我迄今为止处理点击的Javascript：

<script type="text/javascript">
    var $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};</script>
<script type="text/javascript">
    $(function() {
        var submit_form = function(e) {
            $.getJSON($SCRIPT_ROOT + '/_add_numbers', {
                a: $('input[name="a"]').val(),
                b: $('input[name="b"]').val()
            }, function(data) {
                $('#result').text(data.result);
                $('input[name=a]').focus().select();
            });
            return false;
        };
        $('a#calculate').bind('click', submit_form);
        $('input[name=a]').focus();
    });
</script>

下面是我的python脚本，它使用Flask获得适当的用户输入：

import os
from flask import Flask, jsonify, render_template, request
app = Flask(__name__)
@app.route('/_add_numbers')
def add_numbers():
    a = request.args.get('a', 0, type=int)
    b = request.args.get('b', 0, type=int)
    return jsonify(result=a + b)
@app.route('/')
def index():
    return render_template('index.html')
if __name__ == '__main__':
    port = int(os.getenv('PORT', 8080))
    host = os.getenv('IP', '0.0.0.0')
    app.run(port=port, host=host)

HTML代码不喜欢var $SCRIPT_ROOT = {{ request.script_root|tojson|safe }},行，因为它在花括号上返回了一个错误。当我用应用程序的根URL替换它时，我似乎无法用python脚本的结果来更新我的网页。有什么建议吗？

我使用cloud9作为我的IDE，它与Apache一起托管。我对Javascript和Flask都很陌生，我真的很想下载这个基本的应用程序，这样我就可以继续学习了！

然而，它应该可以工作，但为了简单起见，您可以简单地将其删除，flask将其解析为相对路径。更改你的index.html，它就会起作用。

提示：一定要把你的index.html放在"templates"目录下，并在你的终端或命令提示符"python site.py"中运行它

main_dir
    |--site.py
    |--templates
             |--index.html

index.html:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function() {
        var submit_form = function(e) {
            $.getJSON('/_add_numbers', {
                a: $('input[name="a"]').val(),
                b: $('input[name="b"]').val()
            }, function(data) {
                $('#result').text(data.result);
                $('input[name=a]').focus().select();
            });
            return false;
        };
        $('a#calculate').bind('click', submit_form);
        $('input[name=a]').focus();
    });
</script>
<input name="a" />
<input name="b" />
<a href="#" id="calculate">calculate</a>
<div id="result"></div>
相关文章：