写出html的代码, 用<input>获得用户输入的文本数据,在HTML中使用JavaScript函数,将获取的数据作为参数传递给服务器端的Python脚本。 在服务器端的Python脚本中,使用Flask框架,将接收到的参数传递给含参函数。 执行含参函数,并将结果返回给HTML页面
时间: 2024-03-23 15:39:34 浏览: 63
form-input-list:解析html并提取所有表单输入元素列表
下面是一个简单的示例代码:
HTML页面(index.html):
```html
<!DOCTYPE html>
<html>
<head>
<title>HTML调用Python函数示例</title>
<script type="text/javascript">
function callPythonFunction() {
var userInput = document.getElementById("userInput").value;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
document.getElementById("result").innerHTML = xhr.responseText;
}
};
xhr.open("POST", "/call_function", true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send("userInput=" + userInput);
}
</script>
</head>
<body>
<h1>HTML调用Python函数示例</h1>
<label for="userInput">请输入数据:</label>
<input type="text" id="userInput">
<button onclick="callPythonFunction()">调用Python函数</button>
<p id="result"></p>
</body>
</html>
```
服务器端的Python脚本(app.py):
```python
from flask import Flask, request
app = Flask(__name__)
def my_function(user_input):
# 在这里编写含参函数的代码
result = "您输入的数据是:" + user_input
return result
@app.route("/")
def index():
return app.send_static_file("index.html")
@app.route("/call_function", methods=["POST"])
def call_function():
user_input = request.form["userInput"]
result = my_function(user_input)
return result
if __name__ == "__main__":
app.run()
```
在运行服务器端的Python脚本之前,需要安装Flask框架:
```
pip install flask
```
运行服务器端的Python脚本:
```
python app.py
```
然后在浏览器中打开http://127.0.0.1:5000/,即可看到HTML页面。在输入框中输入任意文本,点击“调用Python函数”按钮,即可调用服务器端的Python脚本中的含参函数,并在页面上显示结果。
阅读全文