使用 Flask 更新已更新的 html dom 的问题答案

【问题标题】：Problem with updating an already updated html dom with Flask使用 Flask 更新已更新的 html dom 的问题
【发布时间】：2021-08-30 08:52:45
【问题描述】：

我有一个烧瓶放置区来上传文件。
上传完成后，我想在 html 网站上打印日志文本
到目前为止它可以工作，唯一的问题是 - div 标签在第二次上传后不会更新日志文本。该网站保留第一次上传的文本。

index.html:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>

$(function(){
  window.setInterval(function() {
  loadNewLogger()
}, 500)

function loadNewLogger(){

  $.ajax({
    url:"/write_log",
    type: "POST",
    datatype: "json",
    success: function(data){
      $(logger).replaceWith(data)
    }
  });
}
});


</script>
<body>
    <div style="color:rgb(0, 0, 0);text-align:center">
    CDR PIPELINE </div>

  {{ dropzone.create(action='upload') }}
  {{ dropzone.load_js() }}
  {{ dropzone.config() }}


  <div id="logger">
    {{ logger }}
  </div>


</body>
</html>

logger.html（否则我会渲染 index.html 两次）

  <div id="logger">
    {{ logger }}
  </div>

摘自flask_app.py：

@app.route('/',methods=['POST','GET'])

def upload():

    if request.method == 'POST':
        f = request.files.get('file')
        f.save(os.path.join(app.config['UPLOADED_PATH'],f.filename))
        upload.logger = ""
        es.main()

        upload.logger = es.main.result

        return upload.logger


    return render_template('index.html')

@app.route('/write_log',methods=['POST'])

def log():

    logger = upload.logger
    return jsonify('', render_template('logger.html', logger=logger))

为什么它只从upload.logger 更新文本一次？

【问题讨论】：

这里的$(logger) 是什么？
div id="logger"
你检查ajax请求是否执行了吗？将控制台放在您的成功函数中，看看它是否在每个时间间隔都打印出来。

标签： python html ajax flask

【解决方案1】：

首先，我建议使用 PHP，而不是 JQuery AJAX。例如，当您从 index.html 上传文件时，您可以重定向到 upload.php，并且可以使用“echo”显示消息但即使您对此不满意，也不要过多地使用 Python 或 JQuery。使用纯 JavaScript 可以很容易地解决您的问题：

这是 logger.html 中的 html 元素：

<div id="logger"></div>

在烧瓶 app.py 中：

document.getElementById("logger").innerHTML="Your message to be displayed"

我还建议您删除 index.html 中的 setinterval，因为人们不喜欢动态重新加载块

【讨论】：

为什么document.getElementById 应该转到flask_app.py？我已将 index.html 中 div 中的 {{ logger }} 替换为 document.getElementById...。它更新一次，但不是第二次。同样的问题。 setinterval 很好，因为我们不会公开使用它