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

Question

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

#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 中创建简单的输入，例如文本区域和提交按钮。 单击该按钮后，您希望在客户端中触发 function 将信息负载发布到服务器。 服务器将处理数据并以 JSON object 的形式将响应发送回客户端，使用来自jsonify的 jsonify。

后一个过程称为 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时会调用服务器视图 function，如果一切顺利，将向客户端发送 JSON object。

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 对象列表
• 不要两次发布您的表单，否则您将在浏览器刷新时丢失有效负载。