Recuperer l'id et transmettre dans un url

Bonjour les amis, je suis un debutant dans javascript mais j'aime faire des choses cool.j'ai une requete qui recupère la liste des mes amis et à chaque click sur un ami j'affiche une fenetre de discussion comme sur facebook mais le probleme c'est que je suis obligé de recharger la page ce que je ne veux pas.Je souhaite qu'à chaque click la fenetre s'affiche sans rechargement de page.

<?php 
                    $id_me = $_SESSION['id_espace'];
                    $query = $db->prepare('SELECT (ami_from + ami_to - :id_me) AS ami_id, id_ent_espace, ami_date, id_espace_commerce, id_espace_ent, pseudo_espace, email_espace, image_espace, online_id
                        FROM amis_espace_commerce
                      LEFT JOIN espace_register_commerce ON id_espace_commerce = (ami_from + ami_to - :id_me)
                      LEFT JOIN espace_commerce_whosonline ON online_id = id_espace_commerce AND id_ent_online = :id_c
                       WHERE (ami_from = :id_me OR ami_to = :id_me) AND ami_confirm = :conf AND id_ent_espace = :id_c AND id_espace_ent = :id_c  ORDER BY pseudo_espace');
                     $query->bindValue(':id_me',$id_me,PDO::PARAM_INT);
                     $query->bindValue(':conf','1',PDO::PARAM_INT);
                   $query->bindValue(':id_c',$id_c,PDO::PARAM_INT);
                   $query->execute();
                   if ($query->rowCount() == 0)
                        {
                         echo '<tr class="table-row">
                         <td colspan="4" align="center">Vous n avez aucun ami pour l instant</td></tr>';
                        }
                        while ($data = $query->fetch())
                        {
                            echo'<tr class="table-row">
                            <td class="table-img">
                            <a href="../profil/profil.php?mon_ami='.$data['ami_id'].'"><img src="avatars-espace/'.htmlspecialchars($data['image_espace']).'" alt="" style="width:80px; height:80px;"></a>
                            </td>
                            <td class="table-text">
                                <h6>'.htmlspecialchars($data['pseudo_espace']).' </h6>
                                <p> '.htmlspecialchars($data['email_espace']).' </p>
                            </td>
                            <td>
                                <span class="fam"><a href="profil.php?mon_ami='.$data['ami_id'].'&name='.htmlspecialchars($data['pseudo_espace']).'#espace_chart_right" style="color:white;"  aria-expanded="true">Message</a></span>
                            </td>';
                            if (!empty($data['online_id'])) echo '<td><i class="fa fa-circle" style="font-size:8px; color:#337ab7;"></i></td>'; else echo '<td><i class="fa fa-circle" style="font-size:8px; color:red;"></i></td>';
                           echo '</tr>';
                        }
                        $query->CloseCursor();
                        ?>

Voila je rencontre un petit problème avec mon code.

Ce que je fais

Décrivez ici votre code ou ce que vous cherchez à faire

<?php
echo'<span class="fam"><a href="profil.php?mon_ami='.$data['ami_id'].'&name='.htmlspecialchars($data['pseudo_espace']).'#espace_chart_right" style="color:white;"  aria-expanded="true">Message</a></span>';
?>
je veux qu'on click sur ce lien la fenetre de discussion s'ouvre sans recharger la page et contenant l'id de l'ami, le div de la discussion est #espace_chart_right

Ce que je veux

je veux qu'à chaque click sur le lien contenant le pseudo de l'ami la div[espace_chart_right] s'ouvre et contenant l'id de l'ami sans recharger la page.

Ce que j'obtiens

j'ai essayé mais rien