使用JavaScript读取动态生成表单数据 所有AJAX请求均返回首行ID如何解决

• ID选择器不匹配且全局查询逻辑错误：你的模板中每个隐藏输入的ID是动态拼接的id_pratica_{{行ID}}，但JS代码中直接使用$('#id_pratica')全局查询，该ID实际不存在。就算你存在重复ID，DOM规范要求ID全局唯一，重复ID的选择器只会返回第一个匹配到的元素，这就是你永远拿到第一行ID的核心原因。
• 未定位当前点击按钮所属的表单：点击按钮时没有基于当前触发事件的元素定位对应表单内的字段，全局查询只会返回最先匹配到的元素值。

无需修改现有模板代码，直接调整JS逻辑即可：通过当前点击的按钮找到所属的<form>元素，再在表单范围内查询对应字段值即可。
修改后的JS代码如下：

$(document).ready(function() { 
    $(".aggiorna_app").click(function(event) { 
        event.preventDefault();
        // 定位当前点击按钮所属的表单
        const $currentForm = $(this).closest('form');
        // 仅在当前表单范围内查询字段值
        const idPratica = $currentForm.find('input[name^="id_pratica_"]').val();
        const dataInt = $currentForm.find('input[name="data_int"]').val();
        const oraInt = $currentForm.find('input[name="ora_int"]').val();

        $.ajax({
            data : {
                tipo_richiesta : "inserisci_intervento",
                id : idPratica,
                data_int : dataInt,
                ora_int : oraInt
            },
            type: "POST",
            url: "/aggiorna_pratica",
            beforeSend: function(){
                // 前置操作逻辑
            },
            success: function(data){
                console.log(data);
            }
        });
    });
});

如果要进一步优化可维护性，也可以调整模板，把隐藏输入的name属性设为固定值，不需要拼接动态后缀：

{% for row in data %}
    <form action="/aggiorna_pratica" method='POST' id="inserisci_app_{{ row[0][1] }}">
       <!-- 固定name属性，仅ID保留动态值 -->
       <input name="id_pratica" type='hidden' id="id_pratica_{{ row[0][1] }}" value="{{ row[0][1] }}">
       <button type="submit" class="btn btn-success aggiorna_app">
          <i class="fa fa-check"></i>
       </button>
    </form>
{% endfor %}

调整模板后JS取值可以简化为$currentForm.find('input[name="id_pratica"]').val()，逻辑更清晰。

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