按下按钮时将数据从 flask 加载到 html

Question

我试图在按下按钮时将变量加载到 HTML 页面中。 问题是我已经有一个 function 来加载初始页面，并且新数据应该在同一页面上加载，无需重定向。 这是我现在拥有的代码：

.py file: 

@app.route('/')
    def index():
       return render_template('index.html')

def get_documents():
   documents = {'asd': 'as', 'def':'de'}
   return render_template('index.html', documents=json.dumps(documents))

index.html 文件

<div>
  <button onclick="Start()" id="StartButton" >Start</button>
</div>


<div id = "feed" style="display: none;">  
</div>
<script>
    var d = JSON.parse('{{documents | tojson | safe}}');
    document.getElementById('feed').innerHTML = d.asd; 
 </script>

.js 文件：

function Start() 
{
  var feed_div = document.getElementById("feed");
  feed_div.style.display = "block";
}

我希望当我按下开始按钮时，文档结构中的内容会出现在 .feed 部分。 我怎么能这样做？

此外，文档将是一个列表，但在这里我使用了 json，因为我想尝试一些我找到的示例。

Answer 1

您可以在 feed 元素中创建 div 元素，该元素将包含您的所有文档数据并且将被隐藏

<div id="document" style="display: hidden">
    {% for item in documents %}
        <div>{{ item }}</div>
    {% endfor %}
</div>

然后在 javascript 中更改文档元素的显示：

function start() {
    document.getElementById("document").style.display = "block";
}