Flask表单提交时如何获取JS动态生成的非input段落内容

核心逻辑 #

完全保留原有用于展示动态URL的<p>标签（不修改标签类型、元素ID、原有JS对该元素的赋值逻辑），通过新增隐藏表单字段、在表单提交前同步p标签内容到隐藏字段的方式传值，整套流程不干扰原有业务代码运行。

具体实现 #

1. 调整表单结构 #

现有表单DOM完全保留，仅在URL展示区域新增一个和后端取参字段同名的隐藏输入框，不改变现有页面展示样式：

<div class="form-group">
    <div class="url-panel">
        <p> <b>Url:</b></p>
        <!-- 原有p标签完全保留，原有JS对该元素的赋值逻辑不受任何影响 -->
        <p id="api-url" name="api-url"></p>
        <!-- 新增隐藏字段，name和后端取参字段保持一致 -->
        <input type="hidden" name="api-url" id="api-url-hidden">
    </div>
</div>

2. 添加独立的提交同步脚本 #

新增的JS逻辑完全独立，不修改原有生成URL的JS代码，仅监听目标表单的提交事件，在请求正式发送前将p标签内的最新URL值同步到隐藏字段：

// 定位到对应提交表单
const targetForm = document.querySelector('form[action*="handle_data"]');
targetForm.addEventListener('submit', function(e) {
    // 读取p标签内动态生成的URL文本
    const urlContent = document.getElementById('api-url').textContent.trim();
    // 将值写入隐藏表单字段
    document.getElementById('api-url-hidden').value = urlContent;
    // 可选校验：URL为空时阻止提交，避免无效请求
    if (!urlContent) {
        e.preventDefault();
        alert('URL尚未生成完成，请稍候再提交');
    }
})

3. 后端代码零改动 #

由于隐藏字段的name属性与后端原有取参字段完全一致，现有Flask路由代码无需任何修改，即可正常获取到URL值：

@app.route('/handle_data', methods=['POST'])
def handle_data():
    sper_year = request.form["Speryear"]
    email = request.form["inputEmail"]
    # 直接读取隐藏字段传入的URL值
    url = request.form["api-url"]
    Requested_data = GIPOD_converter.main(url, sper_year, email)
    return Requested_data

方案优势 #

• 原有用于生成URL的JS代码、p标签的结构/样式/ID完全保留，不会出现元素查找失败、赋值不生效的问题
• 隐藏字段对用户完全不可见，不改变原有页面交互体验
• 内容同步逻辑在表单提交触发的最后一步执行，不受原有JS生成URL的时机影响，始终能拿到最新的正确值

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