flask提交后无法更改html样式

我使用的是flask,html,js.现在我在上传到flask的时候遇到了一个问题。

我想要在跳到flask完成返回 templates_render的时候实现对dropbox.style的改写。但是这句总是实现不了。问chatgpt的回答是使用异步的Promise也没有得到正确结果。所以想请问如何才能够完成提交flask操作后，得到新的网页时，新的网页能够自动读取dropbox.style的新样式。感激不尽。


```javascript

    function sub() {
    var oFile = document.getElementById('submit_img');
        if (oFile.value !== "") {
            document.fo.action = "/sub/";
            document.fo.submit();
            dropBox.style.backgroundImage="url('" + base64 + "')"
        } else {
            alert("没有检测到图片呢，请重新上传~");
        }
    document.fo.action = "/";
}

```


function sub() {
    var oFile = document.getElementById('submit_img');
    if (oFile.value !== "") {
        document.fo.action = "/sub/";
        document.fo.submit();

        // 从后端获取或生成新的样式（假设为 newStyle）
        var newStyle = "url('" + base64 + "')";

        // 重定向到 Flask 路由的返回页面，并将新样式作为参数传递
        window.location.href = "/templates_render?newStyle=" + encodeURIComponent(newStyle);
    } else {
        alert("没有检测到图片呢，请重新上传~");
    }
    document.fo.action = "/";
}

在 Flask 的路由函数中：

from flask import render_template, request

@app.route('/templates_render', methods=['GET'])
def templates_render():
    new_style = request.args.get('newStyle')  # 获取传递的新样式参数
    return render_template('new_page.html', new_style=new_style)

模板文件 new_page.html 中：

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 其他样式... */
        #dropBox {
            /* 使用传递的新样式 */
            background-image: {{ new_style|safe }};
        }
    </style>
</head>
<body>
    <!-- 页面内容... -->
</body>
</html>

get提交到地址栏上，新页面接收下？有则用。无则设置个默认的

以下内容由CHATGPT及阿里嘎多学长共同生成、有用望采纳：

在提交表单后，由于页面会重新加载，之前设置的dropBox样式会被重置。为了保持样式的更新，可以在提交表单后，后台通过Flask模板渲染将最新的样式信息传递到前端页面中。具体实现步骤如下：

在Flask中定义一个路由，用于处理表单提交后的请求，例如：

@app.route('/sub/', methods=['POST'])
def submit():
    # 处理表单提交的逻辑
    # ...
    # 获取最新的样式信息
    new_style = get_new_style()
    # 将最新的样式信息传递到模板中
    return render_template('index.html', new_style=new_style)

在模板中使用传递的最新样式信息更新dropBox的样式，例如：

<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>My Flask App</title>
    <style>
      #dropBox {
        /* 默认样式 */
        background-image: url('default_image.jpg');
        /* 最新样式 */
        {{ new_style }}
      }
    </style>
  </head>
  <body>
    <form name="fo" enctype="multipart/form-data" method="post">
      <!-- 表单内容 -->
    </form>
    <div id="dropBox"></div>
    <script>
      function sub() {
        var oFile = document.getElementById('submit_img');
        if (oFile.value !== "") {
          document.fo.action = "/sub/";
          document.fo.submit();
        } else {
          alert("没有检测到图片呢，请重新上传~");
        }
      }
    </script>
  </body>
</html>

在前端JavaScript中不再更新dropBox的样式，只负责提交表单，例如：

function sub() {
  var oFile = document.getElementById('submit_img');
  if (oFile.value !== "") {
    document.fo.action = "/sub/";
    document.fo.submit();
  } else {
    alert("没有检测到图片呢，请重新上传~");
  }
}

这样，每次表单提交后，都会通过Flask模板渲染将最新的样式信息传递到前端页面中，并更新dropBox的样式，从而实现样式的更新。

document.fo.submit();这句代码放到最后来执行.