python - 如何在 UI/web 中公开 python input() 函数，从客户端（用户）获取输入并将其传递回服务器

Question

如何在 UI/web 中公开 python input() 函数，从客户端（用户）获取输入并将其传递回服务器。然后进行一些计算并将其传递回客户端（用户）。

#Step 1：我从用户那里得到输入

val = input("Enter your Date of Birth: ") 

#Step 2 : 计算他的年龄

def age_calc(val):
#code to calc age 
   return age

#Step 3 : 我将他的年龄显示回 UI

Answer 1

您的问题的答案很长，我将尝试总结将您链接到所需文档的过程。

首先，在 HTML 中创建简单的输入，例如文本区域和提交按钮。单击按钮后，您希望在客户端中触发一个函数，该函数将信息负载发布到服务器。jsonify服务器将使用from flask处理数据并以 JSON 对象的形式将响应发送回客户端。

后一个过程称为 AJAX，在进行服务器/客户端通信时非常常用。

流程步骤简介：

1. 在 HTML 中创建简单的输入，例如文本区域和提交按钮，为用户提供一些输入字段，他们可以在其中输入信息。

HTML

    <textarea id="text" name="text" spellcheck="false", autocomplete="off" autofocus>##Type sth</textarea>
    <input type="button" id="clickme">

2. 单击按钮后，在您的客户端触发一个事件并将您的有效负载发布到服务器。

客户

textEditor = document.getElementById("text");
document.getElementById("clickme").onclick = func;


function func(){

    console.log('start')
    
    $.post('/_get_payload', {
        text: textEditor.value
    }).done(function(data){
        // data is the payload received from the server
        console.log('success')
    }).fail(function(){
        console.log('fail')
    });

    console.log('end')
    
}

3. 单击时会调用服务器视图函数，button如果一切顺利，将向客户端发送一个 JSON 对象。

from flask import jsonify

....

@app.route('/_get_payload', methods=['POST'])
def get_payload():
    data = request.form['text']

    # prints the user input written in the textarea
    print(data)

    return jsonify({ 
        "sth": "sth"
    })

你应该记住的事情是：

• jsonify()只能将序列化的对象发送回客户端，参考： Flask jsonify a list of objects
• 不要两次发布您的表单，否则您将在浏览器刷新时丢失有效负载。