javascript - 更改了选项卡值但未反映在页面中？

Question

我正在使用 ajax 寻求解决方案来动态更新 div 中的数据值并反映 HTML 中的效果。数据值来自后端烧瓶和 sql DB。我知道数据值已经更新，因为如果我刷新页面，新的数据值将反映在页面中。有没有办法实现这个功能在网页上实时自动反映效果？我不想触发另一个表单提交来达到这个效果。:)

简而言之，ajax响应数据成功，但没有更新html，所以网页没有反映更新的值。

谢谢你 ！

@app.route("/fetch_bar",methods=['POST'])
def fetch_bar():
    result = [{'hostname': 'testaa101.com', 'status': '30'}] ### example data that actually getting from DB.
    app_json = json.dumps(result)
    return jsonify(app_json)

function bar_progress(){
  $.ajax({
      url:"{{ url_for('fetch_bar') }}",
      type:"post",
      dataType: "json",
      async: false,
      success:function(response){
        var response = JSON.parse(response);
        var len = Object.keys(response).length;
        var bars = document.querySelectorAll("[id=ldBar]");
        if (len > 1)
          for( var ind = 0; ind < len; ind++){
              if (selects[index].value == response[ind].hostname)
                bars[index].setAttribute("data-value",response[ind].status);
        }}})}

  function shadow_progress() {
    bar_progress()
      setTimeout(shadow_progress, 15000);
  }
  shadow_progress();




<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}}" >
      <div id="ldBar" class="ldBar label-center" data-value="0" data-preset="stripe" data-aspect-ratio="none" style="width:100%;display: block;" ></div>
</td>
......
  {%endfor %}

标签： javascripthtmlflask