如何捕获 Streamlit 表单变量并将其传递给 Javascript？答案

【问题标题】：How to catch a Streamlit form variable and pass it into Javascript?如何捕获 Streamlit 表单变量并将其传递给 Javascript？
【发布时间】：2022-12-14 22:21:31
【问题描述】：

从我简单的Streamlit联系表，我想赶上姓名、电子邮件和消息并使用JavaScript通过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")

my_js = """
            var dict_values = {"{{name}}", "{{email}}", "{{msg}}"};
            var s = JSON.stringify(dict_values);
            console.log(s);
            window.alert(s);
            $.ajax({
                method: 'POST',
                url: 'https://formsubmit.co/ajax/my-email',
                dataType: 'json',
                accepts: 'application/json',
                data: JSON.stringify(s)
                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)

代码运行良好，我的意思是表单，但没有任何反应！我认为我的问题是我将变量传递给JavaScript 的方式！

非常感谢任何帮助/建议。

【问题讨论】：

标签： javascript python jquery ajax streamlit

【解决方案1】：

您的导入之一不合适，然后是 $.ajax()，它在 success 之前似乎缺少 ,，而且我认为您的 dict_values 变量未正确分配。它应该使用 name、email 和 msg 变量，并使用 : 字符为键赋值，而不是 , 字符。它应该是这样的：

import streamlit as st
import streamlit.components.v1 as components

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")

my_js = """
            var dict_values = {"name": "{{name}}", "email": "{{email}}", "msg": "{{msg}}"};
            var s = JSON.stringify(dict_values);
            console.log(s);
            window.alert(s);
            $.ajax({
                method: 'POST',
                url: 'https://formsubmit.co/ajax/my-email',
                dataType: 'json',
                accepts: 'application/json',
                data: JSON.stringify(s),
                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:
   components.html(my_html)

您可以尝试一下，看看它是否能解决您的问题。否则您应该提供回溯错误消息。

【讨论】：