Flask点击表格行触发路由后返回结果在页面重复显示两次问题求助

直接原因：AJAX回调重复插入内容 #

你在AJAX请求的成功回调里执行了两次内容写入操作，是结果重复的核心原因：

success:function(data)
{ 
    $('tbody').html(data); // 第一次将method2返回的内容写入原页面tbody
    $('tbody').append(data.htmlresponse); // 第二次追加内容，直接导致重复
}

同时你的/method2路由返回的是完整的method2_result.html渲染后的HTML字符串，并没有带htmlresponse字段的JSON结构，data.htmlresponse本身为无效值，操作逻辑完全不符合预期。

其他关联问题 #

1. 元素选择器冲突：两个页面的表格都使用了相同idtable，且直接用$('tbody')匹配所有tbody元素，原页面的tbody和插入的method2内容里的tbody会互相干扰。
2. 标签拼写错误：两个页面的表头标签都写成了<thread>，正确的表头标签为<thead>。
3. 索引越界风险：method1页面的JS里写了rowSelected.cells[6].innerHTML，但你的表格只有4列，单元格索引范围为0~3，取索引6会直接抛出JS报错。

修复方案 #

方案A：点击后跳转新页面展示method2结果 #

直接替换掉原AJAX请求部分代码，用表单提交跳转即可：

var form = $('<form action="/method2" method="post"></form>');
form.append('<input type="hidden" name="var1" value="' + var1 + '">');
$('body').append(form);
form.submit();

该方案会直接跳转到method2的独立页面，不会在原页面插入内容，自然不会有重复问题。

方案B：原页面局部展示method2结果 #

1. 先在method1.html的原表格下方新增单独的结果容器，不要直接修改原表格的内容：

</table>
</div>
<!-- 新增method2结果容器 -->
<div id="method2-result" class="container-fluid mt-4"></div>

2. 修改AJAX的success回调，删除重复的插入操作，只保留一次内容写入：

success:function(data) { 
    $('#method2-result').html(data);
}

3. 可选优化：将method2_result.html里的jQuery引用、重复的块结构删除，只保留需要展示的标题和表格内容，避免重复加载JS资源。

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