如何将 HTML 表单中的股票代码安全传递给 Python 后端模型

9次阅读

如何将 HTML 表单中的股票代码安全传递给 Python 后端模型

本文介绍如何通过 html 表单与 javascript 事件处理,将用户输入的股票代码(如 aapl)可靠提交至 python 后端,供机器学习模型使用;涵盖表单封装前端防刷新提交、基础 ajax 调用及前后端协同要点。

要让您的股票预测网页真正“跑起来”,关键在于建立 html 前端python 后端之间的数据通道。您当前的页面缺少两个核心要素:语义化的表单结构可控的数据提交逻辑。下面我们将以渐进、可运行的方式完成集成。

✅ 第一步:用

包裹输入与按钮(语义化与基础兼容)

HTML 表单不仅是样式容器,更是浏览器默认提交机制的载体。请将您的

       

⚠️ 注意: 在表单内会触发表单默认提交(整页刷新 + GET/POST 请求),这通常不是您想要的——尤其当您需要异步调用 Python 模型时。

✅ 第二步:用 javascript 拦截提交,获取并发送股票代码

底部或单独 js 文件中添加以下脚本(确保 dom 加载完成后再执行):

✅ 第三步:Python 后端需提供对应接口flask 示例)

您的 Python 服务(如基于 Flask)需暴露 /predict 接口接收该请求:

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 即可起步。

text=ZqhQzanResources