AJAX获取数据后无法实时更新HTML中div的data-value问题求助

我来帮你梳理下问题所在，你现在的核心问题是成功拿到了后端数据，但更新data-value后进度条没有实时刷新，主要有几个关键问题需要修正：

1. Flask后端返回格式冗余 #

你现在的后端代码用了json.dumps再jsonify，这会导致返回的是双重JSON字符串（jsonify本身就会自动序列化Python对象为JSON格式），前端还要额外做JSON.parse，容易引发解析问题。

修正后的后端代码：

@app.route("/fetch_bar",methods=['POST'])
def fetch_bar():
    result = [{'hostname': 'testaa101.com', 'status': '30'}] ### 实际从数据库获取的示例数据
    return jsonify(result)  # 直接传入列表，jsonify会自动处理序列化

2. 前端JS变量逻辑错误 #

你的循环里用了未定义的index变量，应该替换成循环变量ind；另外selects变量也没有明确定义（推测是页面上对应hostname的选择器元素），这里先修正变量问题：

function bar_progress(){
    $.ajax({
        url:"{{ url_for('fetch_bar') }}",
        type:"post",
        dataType: "json",
        async: true,  // 建议改成true，同步请求会阻塞页面交互
        success:function(response){
            // 后端直接返回JSON，无需再parse
            var len = response.length;
            var bars = document.querySelectorAll(".ldBar");  // 改用class选择多个进度条
            // 假设selects是页面上对应hostname的选择器元素，根据实际情况调整
            var selects = document.querySelectorAll("[name='hostname']"); 
            if (len > 0) {
                for( var ind = 0; ind < len; ind++){
                    // 修正循环变量为ind，匹配当前项
                    if (selects[ind].value == response[ind].hostname) {
                        bars[ind].setAttribute("data-value", response[ind].status);
                        // 关键：调用ldBar的API触发界面刷新
                        const barInstance = new ldBar(bars[ind]);
                        barInstance.set(response[ind].status);
                    }
                }
            }
        }
    })
}

3. 核心问题：ldBar需主动触发更新 #

这是最关键的一点！ldBar这类进度条插件初始化后不会自动监听data-value属性的变化，仅仅修改属性值不会触发界面刷新。你必须调用它的官方API来更新数值：

• 单个进度条：创建ldBar实例后调用.set()方法传入新值
• 多个进度条：循环遍历每个元素，创建实例并执行更新

另外建议把async: false改成async: true，同步AJAX会阻塞页面，严重影响用户体验。

4. HTML模板优化（可选但建议） #

你的HTML里所有进度条的id都是ldBar，这不符合HTML规范（id必须唯一），建议改成动态id或用class选择：

<form id="myform" name="myform" action="{{url_for('show_select')}}", method="post">
    {% for entry in entries %}
    .....
    <td>
        <input id="stage" type="button" class="btn-primary" onclick="readTextFile();" name="stage" value="{{entry.stage}}" >
        <!-- 改用class选择，id可选动态生成 -->
        <div id="ldBar-{{ loop.index }}" class="ldBar label-center" data-value="0" data-preset="stripe" data-aspect-ratio="none" style="width:100%;display: block;" ></div>
    </td>
    ......
    {%endfor %}

调整完这些后，你的进度条应该就能实时更新啦～

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