在Streamlit应用开发过程中，前端JavaScript交互逻辑往往需要和后端Python处理流程联动，实现JavaScript向Python后端传递数据是常见的开发需求，掌握简易的实现方法能大幅提升开发效率。
方法一：使用Streamlit自定义组件传递数据
Streamlit支持自定义前端组件，通过组件的前后端通信机制可以轻松实现JavaScript到Python的数据传递，这是官方推荐的标准方案。
实现步骤
- 创建自定义组件的前端JavaScript文件，编写数据收集和发送逻辑
- 在Python端定义组件接收逻辑，处理前端传递过来的数据
- 在Streamlit主应用中调用自定义组件，获取传递的数据进行后续处理
代码示例
前端JavaScript代码（component.js）：
// 获取页面输入框的值
function getData() {
const inputValue = document.getElementById('data_input').value;
// 调用Streamlit的组件通信接口，将数据发送给Python后端
Streamlit.setComponentValue(inputValue);
}
// 初始化组件，监听按钮点击事件
document.getElementById('send_btn').addEventListener('click', getData);
Python端组件定义代码（component.py）：
import streamlit as st
import streamlit.components.v1 as components
# 定义自定义组件，指向前端JS文件
_component_func = components.declare_component(
"js_to_py_component",
path="frontend" # 存放前端文件的目录
)
def js_to_py_component():
# 调用组件，获取前端传递的数据
value = _component_func()
return value
# 主应用逻辑
st.title("JavaScript向Python传递数据示例")
# 调用自定义组件
result = js_to_py_component()
if result is not None:
st.write("从JavaScript接收到的数据：", result)
方法二：通过URL参数传递数据
如果数据量较小，也可以通过修改当前页面的URL参数，让Python端从URL中解析数据，这种方式实现简单，不需要额外定义复杂组件。
实现逻辑
JavaScript端修改当前页面的URL，拼接需要传递的参数，Python端通过st.experimental_get_query_params方法获取参数值。
代码示例
JavaScript代码：
function sendDataByUrl() {
const data = document.getElementById('url_data_input').value;
// 获取当前URL，拼接参数
const currentUrl = new URL(window.location.href);
currentUrl.searchParams.set('js_data', data);
// 修改当前页面URL，触发Streamlit重新运行
window.location.href = currentUrl.toString();
}
Python端代码：
import streamlit as st
st.title("URL参数传递数据示例")
# 获取URL中的参数
query_params = st.experimental_get_query_params()
if 'js_data' in query_params:
js_data = query_params['js_data'][0]
st.write("从URL参数中获取的JavaScript数据：", js_data)
两种方法的适用场景对比
| 方法 | 适用场景 | 优点 | 缺点 |
|---|---|---|---|
| 自定义组件传递 | 复杂交互、大数据量、需要频繁通信的场景 | 通信稳定、支持双向交互、官方推荐 | 需要额外编写前后端组件代码，配置稍复杂 |
| URL参数传递 | 简单数据、一次性传递、数据量小的场景 | 实现简单、无需额外组件配置 | 数据量受限、刷新页面才会触发、不适合频繁通信 |
注意事项
- 使用自定义组件时，需要确保前端JS文件和Python组件定义的路径正确，否则会出现组件加载失败的问题
- URL参数传递时，特殊字符需要进行编码处理，避免参数解析错误
- 生产环境中如果使用URL参数传递敏感数据，需要做好数据加密处理，避免信息泄露
StreamlitJavaScriptPython数据传递修改时间：2026-06-23 18:21:28