如何捕获Streamlit表单变量并传入JavaScript实现FormSubmit提交？

你的代码存在几个关键问题，导致点击提交后无响应，以下是修正方案：

问题分析 #

1. Python变量注入JS的方式错误：原代码用{{name}}的写法无法正确将Streamlit捕获的变量传入JS，且未对字符串添加引号，会导致JS语法错误。
2. JS数据结构错误：你用{"{{name}}", "{{email}}", "{{msg}}"}创建的是集合，而FormSubmit需要的是带字段名的键值对对象，这样后端才能识别对应字段。
3. AJAX请求语法错误：data字段重复调用JSON.stringify，且success属性前缺少逗号，导致JS代码无法正常执行。
4. 缺失请求头：发送JSON格式数据时，需要指定Content-Type: application/json，否则FormSubmit无法正确解析请求。

修正后的完整代码 #

import streamlit as st
from streamlit.components.v1 import html

form = st.form("myForm", clear_on_submit=True)
name = form.text_input("Full name")
email = form.text_input("Email Address")
msg = form.text_area("Message")

submit = form.form_submit_button("Send")

# 修正JS代码：正确注入Python变量，构建合法的JSON对象，修复AJAX语法
my_js = f"""
    // 构建符合FormSubmit要求的键值对对象
    var formData = {{
        name: "{name.replace('"', '\\"')}",
        email: "{email.replace('"', '\\"')}",
        message: "{msg.replace('"', '\\"')}"
    }};
    
    console.log(formData);
    window.alert(JSON.stringify(formData));
    
    $.ajax({{
        method: 'POST',
        url: 'https://formsubmit.co/ajax/my-email',
        dataType: 'json',
        contentType: 'application/json',  // 新增：指定JSON格式
        accepts: 'application/json',
        data: JSON.stringify(formData),  // 直接序列化对象，无需重复处理
        success: (data) => console.log(data),
        error: (err) => console.log(err)
    }});
"""

my_html = f'''
<script src="https://code.jquery.com/jquery-3.6.1.js"></script>
<script type="text/javascript">
    {my_js}
</script>
'''

if submit:
    html(my_html)

额外注意事项 #

• 代码中添加了replace('"', '\\"')处理用户输入中的双引号，避免JS字符串截断导致语法错误。
• 测试时可打开浏览器控制台（F12）查看JS报错信息，快速定位问题。
• 需将代码中的my-email替换为你实际接收邮件的邮箱地址。

内容的提问来源于stack exchange，提问作者carl