如何将 HTML-element 的 "metadata" 传递给函数？ / 通过 jinja2 创建的 HTML 个元素的个人 ID

Question

我的标题可能有点混乱... 这是我第一次（有史以来）尝试使用 Web 应用程序，我得到了一组复选框的以下解决方案，这些复选框是在 FastAPI 和 Jinja2 的 html 模板中创建的。

{% for name in names %}
    <input type="checkbox" id='{"box": "a", "name_id": "{{name.id}}"}' onchange=submit_me(this)>
    <input type="checkbox" id='{"box": "b", "name_id": "{{name.id}}"}' onchange=submit_me(this)>
{% endfor %}

<script>
    function submit_me(box){
        data = JSON.parse(box.id)
        data["checked"] = box.checked
        
        fetch("/test", {
            method: "PUT",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify(data)
        })
    }
</script>

这只是一个更复杂代码的简单示例，但展示了我（没有经验的）解决问题的方法来获取框（“a”或“b”）以及名称（通过 jinja 迭代名称） ) 在我的函数中。我只是想知道，这是否真的是一个有效的选择，或者是否有更“标准”的方法来解决这个问题？

顺便说一句，这只是“快速而肮脏”的解决方案，因为我无法通过 jinja 和 FastAPI 直接调用 python 函数（html -> python 后端 -> 数据库)

Answer 1

这不是元素的 id 的用途。如果需要将随机数据附加到元素，请使用 data- 属性。 input 元素具有应该用于描述值的 name 属性和 value 属性，以及实际值。无需在 id 中填充 JSON（这应该是文档中元素的唯一标识符）。

通过选中复选框提交数据似乎也是错误的（通常，取决于您的用例）- 如果您有要提交的数据，请使用 form 元素, 并在单击按钮时提交。

由于您有硬编码值 (a, b)，因此使用迭代似乎也有点奇怪：

<input type="checkbox" name="box_a" id="box-a" value="{{ names[0].id }}" onchange="submit_me(this);">

<input type="checkbox" name="box_b" id="box-b" value="{{ names[1].id }}" onchange="submit_me(this);">

但是，如果您将 a / b 存储在 name 对象中，请使用迭代并使用单个元素在标记中根据需要填写信息：

<input type="checkbox" name="box_{{ name.key }}" id="box-{{ name.key }}" value="{{ name.id }}" onchange="submit_me(this);">

如何将 HTML-element 的 "metadata" 传递给函数？ / 通过 jinja2 创建的 HTML 个元素的个人 ID

How to transmit "metadata" of an HTML-element to a function? / Individual ID for HTML elements created via jinja2

html

javascript

rest

web-applications

fastapi