本文教你用最简方式将用户在 html 表单中输入的股票代码（如 aapl）通过表单提交传给 python 后端，支持原生 javascript 无刷新交互与 flask/django 等常见后端对接，无需第三方库，适合初学者快速上手。
要让前端 HTML 页面与后端 Python 模型协同工作，核心在于建立前后端通信桥梁：用户输入 → 前端捕获 → 发送请求 → Python 接收并调用模型。下面分三步清晰实现，全部使用原生技术，零依赖。
✅ 第一步：完善 HTML 表单结构
<textarea> 和 <button> 必须包裹在 <form> 标签内，才能被浏览器识别为可提交的数据单元。同时建议为 textarea 添加 name 属性（如 name="ticker"），这是后端接收数据的关键标识：
<form id="prediction-form">
<textarea
placeholder="Enter ticker here..."
id="text"
name="ticker"
rows="1"
cols="50">
</textarea>
<button id="submit" type="submit">Go</button>
</form>? 提示：rows="1" 替代 height:50px 更语义化；cols 控制宽度更稳定；name="ticker" 是后端通过 request.form['ticker']（Flask）或 request.POST.get('ticker')（Django）获取值的必需字段。
✅ 第二步：用 JavaScript 拦截提交，发送异步请求
为避免页面跳转/刷新，使用 event.preventDefault() 阻止默认行为，并通过 fetch() 发起 POST 请求到你的 Python 后端接口（例如 /predict）：
<script>
document.getElementById('prediction-form').addEventListener('submit', async function(event) {
event.preventDefault();
const ticker = document.getElementById('text').value.trim();
if (!ticker) {
alert('Please enter a valid stock ticker (e.g., AAPL)');
return;
}
try {
const response = await fetch('/predict', {
method: 'POST',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
body: new URLSearchParams({ ticker: ticker })
});
const result = await response.json();
console.log('Prediction result:', result);
// ✅ 此处可将 result 渲染到页面，如：document.getElementById('output').innerText = result.prediction;
} catch (error) {
console.error('Failed to send ticker:', error);
alert('Connection failed. Please check if your Python server is running.');
}
});
</script>⚠️ 注意事项：
立即学习“Python免费学习笔记（深入）”；
- 确保你的 Python 后端已启动并监听 /predict 路由；
- URLSearchParams 自动编码特殊字符（如空格、&），比手动拼接 ?ticker=... 更安全；
- 错误处理（catch）必不可少——初学者常因后端未运行而卡在“没反应”。
✅ 第三步：Python 后端（以 Flask 为例）接收并调用模型
安装 Flask：pip install flask，然后创建 app.py：
from flask import Flask, request, jsonify
app = Flask(__name__)
# ✨ 模拟你的机器学习模型预测逻辑
def predict_stock_price(ticker):
# 这里替换为你真实的模型加载和推理代码
# 例如：model.predict([[...]]) 或 yfinance + LSTM 推理
return f"Predicted closing price for {ticker}: $192.48"
@app.route('/predict', methods=['POST'])
def handle_prediction():
ticker = request.form.get('ticker', '').strip().upper()
if not ticker or not ticker.isalnum():
return jsonify({'error': 'Invalid ticker format'}), 400
try:
prediction = predict_stock_price(ticker)
return jsonify({'ticker': ticker, 'prediction': prediction})
except Exception as e:
return jsonify({'error': 'Model inference failed'}), 500
if __name__ == '__main__':
app.run(debug=True, host='127.0.0.1', port=5000)启动服务后，在浏览器访问 http://127.0.0.1:5000 即可测试完整流程。
✅ 总结与进阶提示
- 最小可行闭环：HTML 表单 → JS 拦截 → fetch POST → Flask 接收 → 返回 JSON → 前端展示结果；
- 安全性增强：生产环境务必校验 ticker 是否在白名单（如 ['AAPL','GOOGL','MSFT']），防止恶意输入；
- 体验优化：添加加载状态（如按钮变灰+文字变为 “Predicting…”）、禁用重复提交；
- 部署注意：若前后端分离部署（如前端托管在 GitHub Pages，后端在云服务器），需配置 CORS（Flask 可用 flask-cors 库解决）。
你已掌握 Web 应用中最关键的数据流设计——从此，任何用户输入都能成为你 Python 模型的燃料。
