本文介绍如何通过 html 表单与 javascript 事件处理，将用户输入的股票代码（如 aapl）可靠提交至 python 后端，供机器学习模型使用；涵盖表单封装、前端防刷新提交、基础 ajax 调用及前后端协同要点。
要让您的股票预测网页真正“跑起来”，关键在于建立 HTML 前端与 Python 后端之间的数据通道。您当前的页面缺少两个核心要素：语义化的表单结构和可控的数据提交逻辑。下面我们将以渐进、可运行的方式完成集成。
✅ 第一步：用 <form> 包裹输入与按钮（语义化与基础兼容）
HTML 表单不仅是样式容器，更是浏览器默认提交机制的载体。请将您的 <textarea> 和 <button> 放入 <form> 标签中，并指定唯一 ID（如 prediction-form），便于后续 JavaScript 控制：
<form id="prediction-form"> <textarea placeholder="Enter ticker here..." id="text"></textarea> <button id="submit" type="submit">Go</button> </form>
⚠️ 注意：<button type="submit"> 在表单内会触发表单默认提交（整页刷新 + GET/POST 请求），这通常不是您想要的——尤其当您需要异步调用 Python 模型时。
✅ 第二步：用 JavaScript 拦截提交，获取并发送股票代码
在 <body> 底部或单独 JS 文件中添加以下脚本（确保 DOM 加载完成后再执行）：
<script>
document.getElementById('prediction-form').addEventListener('submit', function(event) {
event.preventDefault(); // 阻止页面刷新！这是最关键的一步
const ticker = document.getElementById('text').value.trim();
if (!ticker) {
alert('Please enter a valid stock ticker (e.g., AAPL)');
return;
}
// 使用 Fetch API 发送 POST 请求到您的 Python 后端
fetch('/predict', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ ticker: ticker })
})
.then(response => response.json())
.then(data => {
console.log('Prediction result:', data);
// ✅ 此处可将结果（如预测价格）插入页面，例如：
// document.body.insertAdjacentHTML('beforeend', `<p>Result: ${data.prediction}</p>`);
})
.catch(error => {
console.error('Error submitting ticker:', error);
alert('Failed to connect to prediction service.');
});
});
</script>✅ 第三步：Python 后端需提供对应接口（Flask 示例）
您的 Python 服务（如基于 Flask）需暴露 /predict 接口接收该请求：
立即学习“Python免费学习笔记（深入）”；
from flask import Flask, request, jsonify
app = Flask(__name__)
@app.route('/predict', methods=['POST'])
def predict_stock():
try:
data = request.get_json()
ticker = data.get('ticker', '').strip().upper()
if not ticker or not ticker.isalnum():
return jsonify({'error': 'Invalid ticker'}), 400
# ✅ 此处调用您的机器学习模型（如 load_model() → predict(ticker)）
# prediction = your_ml_model.predict(ticker)
# return jsonify({'ticker': ticker, 'prediction': float(prediction)})
return jsonify({'ticker': ticker, 'prediction': 182.45}) # 示例响应
except Exception as e:
return jsonify({'error': str(e)}), 500
if __name__ == '__main__':
app.run(debug=True)? 关键点总结：
- 前端用 event.preventDefault() 禁用默认跳转，实现无刷新交互；
- 使用 fetch() 发送结构化 JSON 数据，后端用 request.get_json() 解析；
- 输入需校验（空值、非法字符），避免模型异常；
- 错误需双向捕获（前端 catch + 后端 try/except），提升健壮性。
现在，当用户输入 AAPL 并点击 Go，JavaScript 将提取值、发送至 /predict，Python 接收后调用模型并返回结果——整个流程干净、可调试、符合现代 Web 实践。无需框架，纯原生 HTML/JS/Python 即可起步。
