Flask ajax html communication

Question

I would like a help with a Python application using the Flask framework, I want to send data to html ,and then show this data in a table.

the function of flask :

@myapp.route('/treino', methods=['GET', 'POST'])
def treinar_modelo():
    scoreF, scoreSV, scoreA = mdF, mdSV, mdA
    listascore = [scoreF, scoreSV, scoreA]
    return jsonify({'data': render_template('index.html', listascore=listascore)})

The part of javascript that has to receive the data from a button that is clicked, this data must go to a table

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
      $('button#md').click(function(){
          e.preventDefault()
        $.ajax({
            url: "/treino",
            type: "POST",
            success: function(resp){
                $('table#score').append(resp.data);
            }
        });
      });

The html part, the button to be pressed and the table to be filled from the data that I will get from the python function , I know that things are missing and that most of the code is wrong , I would love a guideline :

<form action="" method="POST" >
  <button onclick="" id="md"  type="button" class="btn btn-secondary" value="treinar" name="treinar" >Treinar modelo  <i style="font-family: FontAwesome !important;" class="fas fa-chevron-circle-right"></i></button>
  </form>
</a>
</nav>

<table  style=" text-align: center; align: center; valign: middle; border: 15px solid white; border-top:none; border-bottom:none; opacity : 0.7;" class="table table-dark " id="score" >
  <thead>
    <tr>
      <th scope="col"></th>
      <th scope="col">Floresta aleatória</th>
      <th scope="col">Support vector machine </th>
      <th scope="col">Árvore de decisão</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row"></th>


                {% for score in listascore %}
      <td><output  >  {{  score  }}  </output></td>

      <td><output  >  {{  score }}  </output></td>

      <td><output  >  {{  score  }}</output></td>
                     {% endfor %}

    </tr>
  </tbody>
</table>

Answer 1

In this case you will have to render the table by javascript and not by html has a function called innerHtml, take a look at it.

https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML