发送价值给客户和弹出模式的东西参考价值

Question

我是IT的一年级学生，我们在学校做数据库管理，我们需要在数据库上做SCRUD。我想去一个专业更远一点，但我不能使它工作后，许多小时的尝试和研究。在我的数据表中，我有3个图标

我想做的： 点击信息图标，我想显示更多关于这个人的数据。要显示数据，将弹出一个模态。然后在模式外单击并检查另一个客户时，我希望它显示此客户的“实时”数据。

我们的工具： 我们使用的是VSC、Python、Flask、Jinja、Javascrip、html、css（bootstrap）

以下是我到目前为止所做的尝试：

点击后，数据就被正确地发送到服务器端并很好地返回，（当我进入开发工具/网络时，我可以看到我的结果弹出。问题是我不能使它来“活”在我的页面与模态

现在我只是为了测试目的传递一个变量，稍后，我会发回一些SQL查询。我想最好使用render\u template\u string，因为我想显示一个更新了所有信息的模式

屏幕：
screen of my data table
modal pop up
network response
console log

这是我的Python：

@app.route('/test', methods=['GET','POST'])
def test():
    getIdClient =None
    if request.method == "POST":
        getIdClient = request.json
        idClientGetted = json.dumps(getIdClient) ## transferring the value
        return render_template('EditCampagne.html', idClientGetted = idClientGetted)

以下是我的Javascript：

$(document).ready(function(){
  $('a.showValue').bind('click', function() {
    var getIdClient = this.parentNode.parentNode.cells[0].textContent; // getting the value of the client id in the table
    var showIt =  document.getElementById('inputCache'); //temporary value, just to make it appears on the html for more visiblity
    showIt.value = getIdClient;
    console.log(getIdClient);
    $.ajax({
        url: 'test',
        type: "POST",
        datatype:'json',
        contentType:'application/json',
        data:JSON.stringify(getIdClient) 
  }) /* verification data sent correctly */
  .done(function (data) { console.log("Envoyé " + getIdClient) }) 
  .fail(function (jqXHR, textStatus, errorThrown) { console.log("ERROR"); });

这是我的数据表的html

你知道吗 Ré苏丹：{{idClientGetted}}

你知道吗 你知道吗

        <form method="POST" action="">

        <div>

        </div>

        <br>

        <div class="row"></div>
          <div class="col-3 m-auto">
            <div class="input-group mb-2">  
              <input type="text" class="form-control" id="searchInputCamp" onkeyup="searchThruTable()" placeholder="Rechercher">
              <div class="input-group-prepend">
                <div class="input-group-text"><i class="fas fa-search"></i></div>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
        <div class="col-10 m-auto pt-5">
          <table id="mytable3" class="table font-weight-normal ">
              <thead class="bg-primary text-white rounded font-weight-normal">
                  <tr style="font-size:14px;">
                      <th># Client</th>                      
                      <th>Nom</th>
                      <th>Prénom</th> <!-- pour plus tard essayer de fusionner le champs prenom + nom -->
                      <th>Compagnie</th>
                      <th>Nombres de campagnes</th><!-- pour plus tard essayer de fusionner le champs adresse total -->
                      <th>Nombres d'objectif</th>
                      <th>Budget</th>
                      <th>Cout total Obj</th> 
                      <th>Bénéfice</th>
                      <th>Apport Privé</th>                      
                      <th><i class="fas fa-edit"></i></th>
                      <th><i class="fas fa-trash-alt"></i></th>
                      <th><i class="fas fa-question-circle"></i></th>                            
                  </tr>
              </thead>
              {% for row in dataCampV %}
                  <tr style="font-size:12px;text-align:center;">           
                      <th scope="row">{{ row.id_Client }}</th>
                      <td>{{ row.Nom }}</td>
                      <td>{{ row.Prenom }}</td>
                      <td>{{ row.Nom_Entreprise }}</td>
                      <td>{{ row.qtecamp }}</td>
                      <td>{{ row.qteobj }}</td>
                      <td>{{ row.budgettot }}</td>
                      <td>{{ row.couttotalobj }}</td>
                      <td>{{ row.bnf }}</td>
                      <td>{{ row.apportprive }}</td>                
                      <td class="text-center"><a href="#showClientModalInfo" data-toggle="modal" class="setCellValue showValue"><i class="fas fa-question-circle"></i></a></td>
                      <td class="text-center"><i class="fas fa-trash-alt"></i></td>
                      <td class="text-center"><i class="fas fa-edit"></i></td>
                  </tr>
              {% endfor %}
          </table>
          </form>
      </div>

这是我的模式html（带屏幕）

   <div class="modal fade " id="showClientModalInfo" tabindex="-1" role="dialog" aria-labelledby="clientLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="clientLabel">Numéro Client : {{ idClientGetted }}</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
              <div class="modal-body">
                <div class="row">
                  <div class="col-11 m-auto text-left">
                    <table id="modalTable" class="table font-weight-normal">                               
                        <tr>
                          <td style="border-top:0px;font-weight:600;">Numéro de campagne : </td> 
                          <td style="border-top:0px;font-weight:600;">###</td>                                                                                        
                        </tr>
                        <tr>
                          <td>Budget  : </td> 
                          <td>##</td>                                                                                        
                        </tr>
                        <tr>
                          <td>Bénéfice : </td> 
                          <td>###</td>                                                                                        
                        </tr>                                                                                       
                        <tr>
                          <td>Date d'échéance : </td> 
                          <td>###</td>                                                                                        
                        </tr>                                                                                   
                        <tr>
                          <td>Apport Privé : </td> 
                          <td>###</td>                                                                                        
                        </tr> 

                        <tr>
                          <td style="border-top:0px;"></td>
                          <td style="border-top:0px;"></td> 
                          </tr>                                                                                  
                        <tr>
                          <td style="border-top:0px; font-weight:600;">Numéro d'objectif : </td> 
                          <td style="border-top:0px;font-weight:600;">###</td>                                                                                        
                        </tr>
                        <tr>
                          <td>Type : </td> 
                          <td>###</td>                                                                                        
                        </tr>
                        <tr>
                          <td>Plateforme  : </td> 
                          <td>###</td>                                                                                        
                        </tr>
                        <tr>
                          <td>Cout objectif : </td> 
                          <td>###</td>                                                                                                                       
                        </tr>
                        <tr>
                          <td>Devise : </td>
                          <td>###</td> 
                        </tr>
                        <tr>
                          <td>Coût par clique  : </td> 
                          <td>###</td>                                                                                        
                        </tr>
                        <tr>
                          <td>Coût par acquisition  : </td> 
                          <td>###</td>                                                                                        
                        </tr>
                        <!-- rajouter dans la query si null écrire autre chose-->
                        <tr>
                          <td>Nombre d'impression  : </td> 
                          <td>###</td>                                                                                        
                        </tr>                
                      </table> 
                    </div>
                  </div>                          
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
                  <button type="button" class="btn btn-primary">Imprimer la fiche client</button>
                </div>
              </div>
            </div>
          </div>

我的最终目标： 我想动态显示模式，而不必刷新页面或加载其他页面。

如果你能给我一些提示，那就太好了！所有的东西都和这些新闻语言和特写混在一起了：）

感谢大家花时间阅读我的问题