Enregistrer des données dans une table mysql via ajax

Version imprimable

Bonjour,

J'essai d'insérer des données dans une table mysql via ajax et cela ne fonctionne pas alors je fais:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
$(".frmComment").submit(function() {
 
$.ajax({
method: "POST",
url"../content/insertComment.php",
data: $(".frmComment").serialize(),
})
.done(function() {
$(".return").html("<link rel='stylesheet' type='text/css' href='../content/bootstrap-5.0.0-alpha3-dist/css/bootstrap.min.css'><p class='alert-success p-3 rounded text-center col-lg-4'>Votre commentaire a bien été enregistré !</p>")
})
return false;
});

Mon php:

Code:

1
2
3
4
5
6
require_once '../controller/dbConfig.php';
 
            $stmt3 = $conn->prepare('UPDATE demandes SET myComment = ? WHERE demande_id = ?');
            $stmt3->bind_param('si', $_POST['myComment'], $_POST['hidden_demande_id']);
            $stmt3->execute();
            $stmt3->close();

Mon formulaire:

Code:

1
2
3
4
5
6
7
8
9
10
<form action="" method="POST" name="frmComment" class="frmComment" id="frmComment">
                        <input type="hidden" name="hidden_demande_id" value="<?php echo $demande_id; ?>">
                        <div class="col">
                            <textarea class="col-lg-4 mb-1 myComment" name="myComment" id="myComment"></textarea>
                        </div>
                        <div class="col">
                            <button class="btn btn-secondary float-left" type="submit" name="regComment"
                                id="regComment">Enregistrer</button>
                        </div>
                    </form>

Je précise que mon php fonctionne bien et enregistre bien mes données dans ma table si je ne passe pas par ajax.

Rien ne se passe et dans l'onglet network du débogueur quand je clique sur insertComment.php il n'y a rien donc pas d'erreur.

Je vous remercie de votre aide

11/03/2021, 00h34
mathieu

si vous ne voyez pas de requête AXAJ dans l'onglet "réseau", c'est qu'il y a un souci dans le code javascript donc c'est là que vous devez débuguer.

Bonjour,

Il faut toujours utiliser le callback fail d'ajax pour t'assurer qu'il n'y a aucune erreur, et utiliser les arguments (data et err dans l'exemple) et aussi des console.log ou alert.

Si l'insertion dans la base de donnée n'est pas effectuée, le message Votre commentaire a bien été enregistré ! s'affichera toujours, ce qu'il ne faut pas et donc tu dois générer le message en PHP et pas en js.

Puis je ne vois pas l'intérêt de recharger le <link /> de bootstrap à chaque succès d'ajax, pourquoi ne pas le mettre tout au début de la page dans <head> tout simplement ou peu import ?

Si tu utilises mysqli, as-tu essayé d'insérer des caractères spéciaux dans les commentaires par exemple ? aucun problème d'encodage ?

Exemple :

JS :
Code:

1 2 3 4 5 6 7 8 .done(function(data) { console.log("Done :",data);//cette ligne doit apparaitre dans la console du navigateur. $(".return").html(data);//le message du fichier php est enregistré dans data }) .fail(function(err){ alert("Erreur ajax :"+err); });
PHP :
Code:

1 2 3 4 5 6 ... $stmt3->execute(); if($stmt3->affected_rows>0) echo "Votre commentaire a bien été enregistré !"; else echo "Aucune modification n'a été effectuée !"; $stmt3->close();

11/03/2021, 08h29
TBA_78

Merci à vous deux pour vos réponses .fail ne me renvoie aucune erreur ajax et je n'ai pas de problème de caractères spéciaux alors je vais continuer à chercher.
11/03/2021, 13h57
Toufik83
J'ai oublié un truc très important, la page est rechargée quand tu cliques sur le bouton submit, car il n'y a aucun preventDefault() dans ton code.

Ajoutes là avant l'appel d'ajax :
Code:

1 2 3 4 5 $(".frmComment").submit(function(event) { event.preventDefault();//empêcher le rechargement de la page $.ajax(....) });

Maintenant l'enregistrement des données se fait bien sans recharger la page mais pour la récupération, il faut la recharger.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 
  $(document).ready(function() {
      getCommentaire();
$(".frmComment").submit(function(event) {
              event.preventDefault();
 
              $("#myComment").val().replace(/<|>/g, "") // prevent xss;
 
              $.ajax({
                  method: "POST",
                  url: "../content/insertComment.php",
                  data: $(".frmComment").serialize(),
              })
 
              .done(function(data) {
                      console.log("Done :", data);
                      $(".return").html(data);
                  })
                  .fail(function(err) {
                      alert("Erreur ajax :" + err);
                  });
              return false;
          });
      });
 
      function getCommentaire() {
          let searchParams = new URLSearchParams(window.location.search)
          searchParams.has('demande_id')
          let demande_id = searchParams.get('demande_id')
          console.log(demande_id);
 
          $.ajax({
              method: 'POST',
              url: '../content/recupComment.php',
              data: { "demande_id": demande_id },
              success: function(data) {
                  $(".afficher").html(data);
              }
          });
      }
         });

12/03/2021, 16h54
TBA_78
C'est bon j'ai ajouté après la fonction getCommentaire :
Code:

1 2 setInterval(getCommentaire, 1000);
Merci encore