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

Question

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

#第 1 步：我收到用户的输入

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

#第二步：计算他的年龄

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

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

Answer 1

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

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

后一个过程称为 AJAX，在进行 server/client 通信时非常有用。

流程步骤介绍：

Create simple inputs in HTML such as a textarea and a submit button to give users some input fields where they can type information in.

HTML

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

In your client side trigger an event once the button is clicked and post your payload to the server.

客户端

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')
    
}

The server view function is called when the button is clicked and will send back to the client a JSON object if everything went smoothly.

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
不要 post 您的表单两次，否则您将在浏览器刷新时丢失负载。

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

How to expose python input() function in UI/web , to get input from client(user) and pass it back to server

python

python-3.x

flask

python-webbrowser

streamlit