Forum : besoin d'aide avec Ajax

Bonjour,
j'aurais besoin d'aide pour réaliser une modal qui comporte un formulaire php/mysql , je voudrais qu'il soit en Ajax pour avoir le resultat directement dans la modal, si quelqu'un pourais me fournir une base pour commencer car j'ai du mal à comprendre

<?php require 'bdd.php' // Appelle de la connexion à la BDD?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js" integrity="sha384-8iPTk2s/jMVj81dnzb/iFR2sdA7u06vHJyyLlAd4snFpCl/SnyUjRrbdJsw1pGIl" crossorigin="anonymous"></script> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <title>Ajax Modal Bootstrap</title> </head> <body> <div class="container-fluid"> <h1>Ma liste d'amis</h1> <button type="button" class="btn btn-primary" style="margin-bottom:20px;" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Ajouter un ami</button> <div class="modal fade" id="exampleModal" data-backdrop="static" tabindex="-1" role="dialog" aria-hidden="false"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Ajouter un ami(e)</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <form method="GET"> <div class="form-group"> <form class="form-inline"> <input name="pseudo" class="form-control mr-sm-2" type="search" style="margin-bottom:20px;" placeholder="Entrer le pseudo de votre ami(e)" aria-label="Search"> <button name="search-friend" class="btn btn-info my-2 my-sm-0">Rechercher</button> </form> </div> </form> <?php if (isset($_GET['search-friend']) && isset($_GET['pseudo'])) { $pseudo = $_GET['pseudo']; if (!empty($pseudo)) { $requser = $bdd->prepare("SELECT * FROM user WHERE username = ?"); $requser->execute(array($pseudo)); // Si tout va bien, on peut continuer while ($donnees = $requser->fetch()) { ?> <div class="table-responsive"> <table class="table"> <thead> <tr> <th scope="col">Pseudo</th> <th scope="col">Prénom</th> <th scope="col">Nom</th> <th scope="col">Actions</th> </tr> </thead> <tbody> <tr> <td> <?php echo $donnees['username']; ?> </td> <td> <?php echo $donnees['firstname']; ?> </td> <td> <?php echo $donnees['name']; ?> </td> <td> <button type="button" class="btn btn-primary btn-sm">Ajouter</button> </td> </tr> </tbody> </table> </div> <?php } $requser->closeCursor(); // Termine le traitement de la requête } else { echo "pseudo non rempli !!!"; } } ?> </div> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-dismiss="modal">Annuler</button> </div> </div> </div> </div> <div class="row"> <div class="col-lg-6 bg-white shadow"> <div class="table-responsive"> <table class="table"> <thead> <tr> <th scope="col">Pseudo</th> <th scope="col">Prénom</th> <th scope="col">Nom</th> <th scope="col">Actions</th> </tr> </thead> <tbody> <tr> <td>alex35</td> <td>Alexandre</td> <td>Bouttier</td> <td> <i class="material-icons">delete</i> </td> </tr> <tr> <td>tom</td> <td>Thomas</td> <td>Loré</td> <td> <i class="material-icons">delete</i> </td> </tr> <tr> <td>kev</td> <td>Kevin</td> <td>Dupont</td> <td> <i class="material-icons">delete</i> </td> </tr> </tbody> </table> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <script src="app.js"></script> </body> </html>

Hello alors, c'est assez "simple".

Tu crées un event onClick sur ton submit en JS (n'oublie pas désactiver le comportement par defaut du submit).
Lors de cet event tu récupères les valeurs qui sont rentrées dans tes inputs.
Tu envoies les valeurs via la méthode post en ajax (utilise jquery ou axios) vers un fichier php par exemple "save.php".
Dans ton fichier "save.php" tu récupères tes valeurs via la superglobal $_POST.
Tu fais ta requête vers ta base de donnée et tu retournes par exemple un objet json qui contient les valeurs que tu as envoyée et aussi un message pour dire que la reqûete est bien passée. Par exemple message : true

Ensuite dans le callback de ton appel ajax tu vas recevoir cet objet json. Si le message est "true". Tu affiches les valeurs (qui sont aussi dans ton objet json) via js dans ton modal.

Et le tour est joué.

Tu peux même aussi au niveau de ton event "onClick" vérifier si les champs sont remplis et afficher des erreurs :)

J'espère que tu y vois plus clair

besoin d'aide avec Ajax

2 réponses