Загружать данные из flask в html при нажатии кнопки

Question

Я пытаюсь загрузить переменную на страницу HTML при нажатии кнопки. Проблема в том, что у меня уже есть функция для загрузки начальной страницы, и новые данные должны загружаться на той же странице без перенаправления. Вот код, который у меня есть сейчас:

.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 file

<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 file:

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

Я бы вот так, когда я нажимаю кнопку Start , содержимое структуры documents появляется в разделе .feed. Как я могу это сделать?

Кроме того, документы будут списком, но здесь я использовал json, потому что хотел попробовать некоторые примеры, которые я нашел.

Answer 1

Вы можете создать элемент 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";
}